反应式表单上的角度验证应在空时打开或关闭，但在输入为空时不切换

Question

我使用Angular Reactive Forms构建了一个简单的表单。我有一个自定义的Validator函数，它检查电话号码输入的格式。如果用户选择不输入电话号码，我想允许一个空输入，但如果他们输入电话号码，则验证他们的输入。

为此，我订阅表单控件上的值更改，并使用setValidators方法来切换验证字段是否为空：

phoneControl.valueChanges.subscribe(() => {
  if (phoneControl.value === "") {
    phoneControl.setValidators(null);
  } else {
    phoneControl.setValidators(this.phoneValidator());
  }
});

请参阅堆栈闪电战的完整代码。

代码最初工作，表单.valid 为真。当我输入一个数字时，它会打开验证，然后根据我的正则表达式成功验证它并显示错误。

但是，当我清空该字段时，错误不会消失，表单表单仍然无效，即使我的代码应将验证程序设置为 null。您可以在上面的堆栈闪电战示例中看到这一点。

我不明白为什么会这样。有什么想法吗？

Answer 1

要验证电话号码输入，您可以使用@rxweb/reactive-form-validators的模式验证器。

您只需在formControl中像这样提到电话号码正则表达式:

ngOnInit() {
        this.userFormGroup = this.formBuilder.group({
            phoneNumber:['', RxwebValidators.pattern({expression:{'onlyPhoneNumber': /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/} })], 
        });
    }

对于错误消息，你可以将消息绑定到 app.component.ts 中，如下所示：

ngOnInit(){
    ReactiveFormConfig.set({"validationMessage":{"onlyPhoneNumber":"Invalid phone number"}});
  }

这是完整的 HTML 代码：

<div>
  <form  [formGroup]="userFormGroup">
    <div class="form-group">
      <label>Phone Number</label>
      <input type="text" formControlName="phoneNumber" class="form-control"  />
     <small class="form-text text-danger" *ngIf="userFormGroup.controls.phoneNumber.errors">{{userFormGroup.controls.phoneNumber.errors.onlyPhoneNumber.message}}<br/></small>  
    </div>
    <button [disabled]="!userFormGroup.valid" class="btn btn-primary">Submit</button>
  </form>
</div>

下面是完整的组件代码

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from "@angular/forms"
import { RxwebValidators } from '@rxweb/reactive-form-validators';

@Component({
    selector: 'app-pattern-add-validator',
    templateUrl: './pattern-add.component.html'
})
export class PatternAddValidatorComponent implements OnInit {
    userFormGroup: FormGroup

    constructor(
        private formBuilder: FormBuilder )
    { }

    ngOnInit() {
        this.userFormGroup = this.formBuilder.group({
            phoneNumber:['', RxwebValidators.pattern({expression:{'onlyPhoneNumber': /^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/} })], 
        });
    }
}

工作Stackblitz

Answer 2

我会推荐你这样做-

if (phoneControl.value === "") {
        phoneControl.clearValidators();
} else {
        phoneControl.setValidators(this.phoneValidator());
}
phoneControl.updateValueAndValidity({emitEvent: false});

清除验证器比将其设置为null更好。

Answer 3

当动态设置验证器时，我们需要调用更新值和验证（）。还要记住添加发出事件：false，这意味着不会触发值更改（以防止循环）。因此，请将代码更改为：

phoneControl.valueChanges.subscribe(() => {
  if (phoneControl.value === "") {
    phoneControl.setValidators(null);
    // or
    // phoneControl.setValidators([]);
    // or as mentioned by Tilak
    // phoneControl.clearValidators();
  } else {
    phoneControl.setValidators(this.phoneValidator());
  }
  phoneControl.updateValueAndValidity({emitEvent: false});
});

您的StackBlitz