Angular FormControl 检查是否需要

Question

有没有办法检查是否需要控制？

当我实现一个专用的表单字段组件时出现了问题，该组件接受 FormControl 并且不仅有 输入 而且还有验证错误。由于某些字段是必需的，因此最好让用户知道 * 是否需要该字段。

有没有办法检查 @Input() 控件:FormControl 的 Validators.required 并显示星号？

Answer 1

你可以这样做:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, AbstractControl } from '@angular/forms';

@Component({...})
export class AppComponent  {
  form: FormGroup = new FormGroup({
    control: new FormControl(null, Validators.required)
  });

  get validator() {
    const validator = this.form.get('control').validator({} as AbstractControl);
    console.log(validator);
    if (validator && validator.required) {
      return true;
    }
  }
}

然后在您的模板中:

<form [formGroup]="form" (submit)="onSubmit()">
  Control: <span *ngIf="validator">*</span> <input type="text" formControlName="control">
  <button>Submit</button>
</form>

<小时/>

注意:只需使用 this.form.get('control').validator({} 作为 AbstractControl 类型获取表单控件抽象控件);

这将返回一个对象，其中包含 FormControl 上存在的验证器列表。然后，您可以检查对象中的required 键。如果它存在并且其值为 true，那么您可以确定在 FormControl 上应用了必需的验证器。

<小时/>

这是一个Working Sample StackBlitz供您引用。