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

一旦有了所有帶有所需驗證器的控件的列表，就可以遍歷它們並相應地應用樣式。

我希望唯一的問題是使用必需的驗證程序來控制嗎？ 如果是，這應該可以解決問題。