代码之家 › 专栏 › 技术社区 › nintschger

角度反应形式-动态设置验证器行为异常

angular-reactive-forms angular-forms typescript angular

nintschger · 技术社区 · 7 年前

我试图将动态验证添加到 ReactiveForm 角度4。

我的问题是 SetValidators() 函数的行为出乎意料。

输入字段可能为空,但如果用户想要输入一些东西,输入值必须至少为4个字符长。

我现在不打算解释它到底是如何运作的,因为我真的不知道它是如何运作的。

请看一下 this plunker . 这很简单,说明了我的问题。

我的问题是:我做错了什么?这是正确的方法吗?我错过什么了吗?是在逻辑中还是在HTML中?

3 回复 | 直到 7 年前

Mohamed Ali RACHID 7 年前

通过订阅 ValueChanges 表单控件的错误将导致此错误 Maximum call stack size exceeded ,最好使用其事件(例如keyup)控制输入中的更改。

不要忘记使用 updateValueAndValidity 在设置新的验证器以应用它们之后。

这是您的组件的新代码,现在运行良好:)

    //our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";

@Component({
  selector: 'my-app',
  template: `
    <div>
      <form [formGroup]="userForm">
        <section>
          <div>
            <label>username</label>
            <input (keyup)="inputValueChanged($event)" formControlName="username" type="text">
          </div>
          <button [disabled]="disableSaveButton()">Save</button>
        </section>
      </form>
    </div>
  `,
})
export class App implements OnInit {

  userForm: formGroup

  constructor(private formBuilder: FormBuilder) {
  }

  disableSaveButton(): boolean {
    console.log("is valid:", this.userForm.controls["username"].valid);
    return this.userForm.controls["username"].invalid
  }

  ngOnInit(): void {
    this.userForm = this.formBuilder.group({
      username: '',
    });
  }

  inputValueChanged(event){
    let  value = this.userForm.controls["username"].value;
    if (value.length > 0) {
          console.log("should be invalid if < 4")
          this.userForm.controls["username"].setValidators([Validators.required, Validators.minLength(4)]);

        } else {
          console.log("should be valid")
          this.userForm.controls["username"].setValidators([]); 
        }
        this.userForm.controls["username"].updateValueAndValidity();

  }


}

@NgModule({
  imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

t3__rry 7 年前

只需在表单声明中添加验证器,使其验证长度,但不是必需的,然后删除对的订阅 valueChanges 因为它很重要:

this.userForm = this.formBuilder.group({
  username: ['', Validators.minLength(4)],
});

your plunker

Eliseo 7 年前

我建议制作一个customValidator并修改了这个customValidator

ngOnInit(): void {
    this.userForm = this.formBuilder.group({
      username: ['',this.customValidator],
    });
}

customValidator(input:Formcontrol)
{
    let condition:boolean
    ...change condition depending some variables...
    return condition?null:{errorDesc:"Not Valid"}

}