Блог

У меня есть массив угловой формы, который выглядит примерно так :

 addNewFormRow():FormGroup{
    return this.FormBuilder.group({
      operator:new FormControl('none'),
      operatorValue:new FormControl({value : 'none', disabled : true }, Validators.required)
    });
  }
 

У меня есть массив групп форм, где может быть более 1 строки.

По умолчанию в новой добавленной строке поле «Значение оператора» будет отключено, и я включаю его, когда значение полей «оператор» изменяется на что-либо, кроме » нет » (вызывая функцию при изменении поля оператора).

Сценарий проблемы : При загрузке экрана я получаю набор данных от объекта и добавляю это значение в форму. Таким образом, будет по крайней мере пять строк, в которых присутствуют значения, но «Значение оператора» отключено.

что я пробовал :

1. Вручную пройдите через отдельный элемент управления формой «оператор».,
2. если его значение не равно none, включите значение «operatorValue»

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

Существует много способов сделать это, но с точки зрения минимального, чистого кода:

Пользовательская директива Вы можете написать пользовательскую директиву и добавить ее в HTML-код элемента управления operatorValue FormControl. Эта директива, теоретически, может вводить ngControl и искать оператор FormControl через родительское свойство ngControl и обрабатывать прослушивание изменений значений там. Это немного дополнительный код, но его легко поддерживать и чистить.

Обратите внимание, что реактивные формы Здесь есть отличная библиотека, расширяющая элементы управления реактивной формой Angular. Используя это, в методе, создающем группу пустых форм, вы можете использовать наблюдаемое «Отключенное время» для прослушивания оператора FormControl и программно отключить/включить соответственно. Это добавляет зависимость к вашему проекту, но добавляет только несколько строк кода к вашему компоненту.

Если вас беспокоит только эта начальная загрузка, вы также можете обновить свой метод addNewFormRow, чтобы использовать необязательный параметр с данными формы. Затем при создании группы форм просто используйте: отключено: !data.operator (вместо жестко заданного true)