Question

我想将条件电子邮件验证仅添加到Reactiveforms Angular 4表单中。只有在用户开始填写电子邮件字段时才应用验证。如果电子邮件字段为空，则不应应用验证。

我目前有以下设置和使用AbstractControl，但不确定我是否正确地采用了这种方式。

form: FormGroup;

ngOnInit(){
  // build the form
  this.form = this.fb.group({
    customer: this.fb.group({
      email: ['', [ this.checkEmail ] ],
      checkboxEmail: false
    })
  })
}

// custom validator
checkEmail(control: AbstractControl){
    if(control.touched && control.dirty) {
      return Validators.email
    } else if (control.value === '') {
      return null
    }
}

更新

现在考虑一下 - 最好检查字段是否填充了以下内容。然后检查它是否为空。

 this.form.get('customer.email').valueChanges.subscribe(

  (email: string) => {
    // logs on every change (in this case a keystroke)
    console.log('email field changing');

    if (email.value !== '') {
      // apply validation.email
    }
 })

更新

我刮了上面的内容并且下面只有一半工作

 checkEmail(control: AbstractControl){

   if(control.dirty && control.value !== '') {
     control.setValidators([Validators.email]);
   } 
 }

以上内容最初将该字段设置为有效，并仅在有内容时应用电子邮件验证。但是，在第二次击键后它只执行。 aa

清除字段时

- 验证仍然适用（如果字段为空，我希望不应用电子邮件验证程序）

仅当字段被触摸/脏时，Angular 4才应用条件验证 - AbstractControl？

0 个答案: