在 Angular 5 中使用响应式表单时，在验证之前标记所需的 formControls

Question

我们想向用户提供视觉反馈，哪个字段是必需的，在验证之前，例如通过突出显示蓝色字段。

我们正在使用 反应式表单 来验证用户的输入：

export class MyFormComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = fb.group({
      name: ['', Validators.required ],
      city: ''
    });
  }
}

使用模板

<form [formGroup]="myForm">
  <div class="form-group">
    <label>Name:
      <input class="form-control" formControlName="name">
    </label>
  </div>
  <div class="form-group">
    <label>City:
      <input class="form-control" formControlName="name">
    </label>
  </div>
</form>

稍后将根据模型生成整个模板。因此，我们希望尽可能保持模板为 "pure"。

但是：为了通过 CSS 突出显示必填字段，我需要在输入元素上使用 class 或属性 (required)。如果 Angular 可以将一个（或两个）设置为 input-Element，当相应的 FormControl 被赋予 required.[=21 的验证器时，那就太好了=]

在上面的示例中，我必须手动添加 class required 或属性 required input-使这个 CSS 工作的元素：

.form-control[required], .form-control.required {
  border-color: blue;
}

当验证器设置为相应的 FormControl 时，有没有办法自动将 class 或属性附加到 DOM 元素？

Answer 1

所以 angular 没有任何称为 getValidators 的东西。这里有一个未解决的问题 https://github.com/angular/angular/issues/13461

但是，您可以执行以下操作来获取所有具有所需验证器的 formControl。（不是我的代码：有人在公开问题上提到）

getValidators(_f) {
  return Object.keys(_f).reduce((a, b) => {
    const v = _f[b][1];
    if (v && (v === Validators.required || v.indexOf(Validators.required) > -1)) {
      if (!a[b]) { a[b] = {}; }
      a[b]['required'] = true;
    }
    return a;
  }, {});
}

const _f = {
  id: [],
  name: [null, Validators.required],
  phone: [],
  email: [null, [Validators.required, Validators.email]]
};
this.frmMain = this._fb.group(_f);
console.log(this.getValidators(_f));    // {name: {"required": true}, email: {"required": true}}

获得包含所需验证器的所有控件的列表后，您可以循环遍历它们并相应地应用样式。

我希望唯一的问题是使用必需的验证器获取控件？如果是，这应该可以解决问题。

在 Angular 5 中使用响应式表单时，在验证之前标记所需的 formControls

Mark required formControls before Validation when using Reactive Forms in Angular 5

angular

angular-forms

angular-formbuilder