在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>

整个模板将在以后的模型中生成。 因此，我们希望模板尽可能保持“纯”。

但是：为了通过CSS突出显示必填字段，我需要在input-element上使用类或属性（ required ）。 当Angular可以为input -Element设置一个（或两个）到input -Element时，这是很好的，当相应的FormControl被提供了required的Validator required 。

在上面的例子中，我将不得不加个班required或属性required 用手的input -元素使这个CSS工作：

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

当将验证器设置为相应的FormControl时，是否可以将类或属性自动附加到DOM元素FormControl ？

Answer 1

因此angular没有任何称为getValidators的东西。 这里有一个公开的问题https://github.com/angular/angular/issues/13461

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

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}}

一旦有了所有带有所需验证器的控件的列表，就可以遍历它们并相应地应用样式。

我希望唯一的问题是使用必需的验证程序来控制吗？ 如果是，这应该可以解决问题。