Angular: Есть ли способ уникально идентифицировать элементы управления html внутри компонента ts?

Question

Метод машинописи

 addOneDocument(supplierForm){
    const controls = supplierForm.controls;
    for(const name in controls){

      if (controls[name].invalid) {
        controls[name].touched=true;
    }
    }
  }

Я хочу изменить этот метод, чтобы проверить определенный элемент управления формы на наличие ошибок. Я действительно хочу что-то вроде следующего

 if ((controls[name].invalid)&&(controls[name].name=="document"))

, но свойство name не существует для типа FormControl. Как однозначно идентифицировать конкретный элемент управления html в машинописи?

Answer 1

Вы можете представить элементы управления формой как древовидную структуру. Например, родительский элемент будет FormGroup, а его потомками может быть несколько FormControls / FormGroups / FormArrays и так далее.

Я не знаю ни одного способа идентифицировать элемент управления формой, подобный этому, но лучшее решение, которое приходит на ум, это использовать get() метод, для которого вы можете указать путь на ваш контроль формы.

Выдержка из Тщательное исследование Angular Формы :

const fg = new FormGroup({
  name: new FormControl(''),
  address: new FormGroup({
    city: new FormControl(''),
    street: new FormControl(''),
  }),
});

Вы можете использовать метод get следующим образом:

fg.get('address.city')

// Or

fg.get(['address', 'street'])

Итак, я бы сказал, что способ идентифицировать элемент управления формы состоит в использовании его path .