3

我只想将条件电子邮件验证添加到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

此外，当该字段被清除时 - 验证仍然适用（如果该字段为空白，我希望不应用电子邮件验证器）

4

0 回答 0