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

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

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

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

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

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

Есть ли способ автоматически присоединить класс или атрибут к элементу DOM, если для валидатора установлен соответствующий FormControl?


angular angular-forms angular-formbuilder
person Florian Gössele    schedule 23.03.2018    source источник
comment
Если я вас правильно понял, вы можете прикрепить свой css к классам .ng-invalid и .ng-valid?   -  person AJT82    schedule 23.03.2018
comment
Да, я могу. Но поле может быть недействительным или действительным, когда пользователь входит на страницу, независимо от того, требуется оно или нет. Таким образом, выделение всех недопустимых полей не помогает.   -  person Florian Gössele    schedule 23.03.2018

Ответы (1)


arrow_upward
3
arrow_downward

Итак, 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}}

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

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

person Vinod Bhavnani    schedule 23.03.2018