Angular 如何使用指令反应形式应用验证规则？

我用反应形式表示角度

<input type="text" name="name" formControlName="name">

---

如何使用指令为此输入应用验证规则（自定义或默认

验证器。必需
）？
有许多内置指令应用某些内置指令：


指令适用于
验证程序。必需
验证程序

<input type="text" name="name" formControlName="name" required>
                                                      ^^^^^^^^

<input type="text" name="name" formControlName="name" [email]="true">
                                                      ^^^^^^^^^^^^^^

<input type="text" name="name" formControlName="name" minlength="4">
                                                      ^^^^^^^^^^^^^

<input type="text" name="name" formControlName="name" maxlength="10">
                                                      ^^^^^^^^^^^^^^

<input type="text" name="name" formControlName="name" pattern="[a-zA-Z ]*">
                                                      ^^^^^^^^^^^^^^^^^^^^


指令使用
validator.minLength
validator

<input type="text" name="name" formControlName="name" required>
                                                      ^^^^^^^^

<input type="text" name="name" formControlName="name" [email]="true">
                                                      ^^^^^^^^^^^^^^

<input type="text" name="name" formControlName="name" minlength="4">
                                                      ^^^^^^^^^^^^^

<input type="text" name="name" formControlName="name" maxlength="10">
                                                      ^^^^^^^^^^^^^^

<input type="text" name="name" formControlName="name" pattern="[a-zA-Z ]*">
                                                      ^^^^^^^^^^^^^^^^^^^^


指令使用
validator.pattern
validator

<input type="text" name="name" formControlName="name" required>
                                                      ^^^^^^^^

<input type="text" name="name" formControlName="name" [email]="true">
                                                      ^^^^^^^^^^^^^^

<input type="text" name="name" formControlName="name" minlength="4">
                                                      ^^^^^^^^^^^^^

<input type="text" name="name" formControlName="name" maxlength="10">
                                                      ^^^^^^^^^^^^^^

<input type="text" name="name" formControlName="name" pattern="[a-zA-Z ]*">
                                                      ^^^^^^^^^^^^^^^^^^^^

html

<input type="text" name="name" formControlName="name" customValidator>
                                                      ^^^^^^^^^^^^^^^

<input type="text" name="name" formControlName="name" customValidator="yurzui">
                                                      ^^^^^^^^^^^^^^^^^^^^^^^^

html

<input type="text" name="name" formControlName="name" customValidator>
                                                      ^^^^^^^^^^^^^^^

<input type="text" name="name" formControlName="name" customValidator="yurzui">
                                                      ^^^^^^^^^^^^^^^^^^^^^^^^


^^^^^^^^^^^^^^^^^^^^^^^^

如果这对您来说还不够，并且您希望异步验证，那么您可以创建与自定义指令等效的异步：

@Directive({
  selector: '[customAsyncValidator]',
  providers: [{
    provide: NG_ASYNC_VALIDATORS,
    useExisting: CustomAsyncValidatorDirective,
    multi: true
  }]
})
class CustomAsyncValidatorDirective implements AsyncValidator {
  validate(control: AbstractControl): Observable<ValidationErrors|null> {
    return of({'custom': true});
  }
}

@指令({
选择器：“[customAsyncValidator]”，
供应商：[{
提供：NG_异步_验证程序，
useExisting:CustomAsyncValidator指令，
多：真的
}]
})
类CustomAsyncValidator指令实现AsyncValidator{
验证（控件：AbstractControl）：可观察{
返回（{'custom'：true}）；
}
}
为什么要使用directiive添加valdiator？因为我的表单元素是一个接受类型的组件
InputComponent
，验证规则您不能在FormControl对象内设置验证规则吗？问题是我不能在formControlObject、formGroup、，视情况而定，我需要显示组件：inputComponent、SelectComponent、TextareaComponent等谢谢您的详细回答，我如何在formGroup中传递元素表单的类型。所以，当我在templete中显示元素时，我想检查formControlType=='number'，然后显示component
InputComponent
，对于slect、textareas、checkbox和redio按钮也是一样的。你可以像这样查看角度引导，只需搜索