Отметьте обязательные formControls перед проверкой при использовании реактивных форм в Angular 5

Question

Мы хотели бы предоставить пользователю визуальную обратную связь, какое поле необходимо заполнить, перед проверкой, например, выделив поле синим цветом.

Мы используем Reactive Forms для проверки ввода пользователя:

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 мне нужен либо класс, либо атрибут (обязательный) для элемента ввода. Было бы хорошо, если бы Angular мог установить один (или оба) в input -Элемент, когда соответствующий FormControl дается валидатор required,

В приведенном выше примере, я должен был бы добавить класс required или атрибут required от руки к input -Элемент, чтобы этот CSS работал:

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

Есть ли способ автоматически присоединить класс или атрибут к 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}}

Получив список всех элементов управления с требуемым валидатором, вы можете просто просмотреть их и соответствующим образом применить стили.

Надеюсь, единственной проблемой было получение элементов управления с необходимым валидатором? Если да, это должно решить проблему.