使用控件的值来动态创建验证器。

在Angular中，响应式表单可以使用Validators库的内置验证器对表单进行验证。但有时候我们需要根据表单中的某些条件来确定是否需要启用某些验证规则。

以下是一个例子，根据表单中的“类型”选择动态加入一些验证：

createForm() { this.myForm = this.fb.group({ title: ['', Validators.required], type: [''], url: [''], phone: [''], });

this.myForm.get('type').valueChanges.subscribe( (type: string) => { if (type === 'web') { this.myForm.get('url').setValidators([Validators.required, Validators.pattern('^(https?://)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-])/?$')]); this.myForm.get('phone').clearValidators(); }

  if (type === 'phone') {
    this.myForm.get('url').clearValidators();
    this.myForm.get('phone').setValidators([(control: AbstractControl) => {
      const value = control.value;
      // validate phone number
      return isValidPhoneNumber(value) ? null : {
        invalidPhone: true
      };
    }]);
  }

  this.myForm.get('url').updateValueAndValidity();
  this.myForm.get('phone').updateValueAndValidity();
}

); }

可以看到，我们使用了控件值的订阅，根据“类型”选择动态设置验证规则。其中在验证手机号时使用了自定义验证器，并在if语句中使用clearValidators()方法来清除之前设置的验证规则。

通过这种方法，我们可以根据表单中的条件来动态调整验证规则，让表单验证更加灵活和智能。