Причина этого в том, что вы используете checked, чтобы отметить, какие флажки должны быть отмечены, они не имеют никакого отношения к вашему массиву форм, поэтому, если вы не коснетесь флажков, formarray будет правильно пуст.
Я могу предложить несколько вариантов решения этой проблемы ... также следующие изменения:
функция изменения может быть изменена на это:
onCheckChange(event) {
if (event.target.checked) {
this.ssArray.push(this.fb.control(event.target.value));
}
else {
this.ssArray.removeAt(this.ssArray.value.findIndex(x => x === event.target.value))
}
}
Ненезависимо от того, как вы это делаете, ваш путь также работает :) Мне также нравится использовать FormBuilder (здесь вводится как fb).
Мне нравится использовать геттер в этом случае:
get ssArray() {
return this.updateSvcForm.get('sservices') as FormArray;
}
Опции, которые я могу придумать:
- добавить свойство
checked к объектам в вашем массиве sservicesOptions - Сохранить функцию
isSelected, но добавитьизначально выбранные параметры для вашего формата
Мне больше нравится вариант 1, поэтому добавьте свойство checked к объектам:
servicesOptions = [
{ description: '1. Sweeping', value: 'sweeping', checked: false },
{ description: '2. Mopping', value: 'mopping', checked: false },
{ description: '3. Windows', value: 'windows', checked: false },
{ description: '4. Washing Clothes', value: 'washingclothes', checked: false },
];
Затем, когда вы создадитеизмените отмеченный статус для тех, которые должны быть предварительно выбраны, а также добавьте значения,d будет проверен в вашем массиве форм:
constructor(private fb: FormBuilder) {
this.updateSvcForm = this.fb.group({
sservices: this.fb.array([]),
});
// change the checked status for the checkboxes that should be checked
this.servicesOptions.map(x =>
this.empDetails.services.indexOf(x) >= 0 ? x.checked = true : x.checked = false)
// initially set the selected form controls to the formarray
this.empDetails.services.map((x) => this.ssArray.push(this.fb.control(x)))
}
Затем вы можете добавить [checked]="service.checked" в шаблон.
DEMO
Вариант 2:
Сохраняйте свою функцию checked такой же, как у вас, просто не забудьте добавить предварительно выбранные значения в ваш formarray.Мне не очень нравится эта опция, так как, например, мы в конечном итоге вызываем функцию в шаблоне, что на самом деле не рекомендуется.Но в любом случае, оставьте код таким же, как сейчас, просто добавьте начальные значения к формату:
this.updateSvcForm = this.fb.group({
sservices: this.fb.array([]),
});
// add the intial values to the formarray:
this.empDetails.services.map((x) => this.ssArray.push(this.fb.control(x)))
DEMO
Я добавил console.log внутри функции, чтобы показать, как она вызывается.Это нормально для такой демонстрации, но если у вас большая форма, я бы действительно предостерег для вас использовать это решение.
Был бы третий вариант, чтобыфактически установите все значения в вашем массиве форм, а затем просто переключите логическое значение флажка, но для этого потребуется некоторый рефакторинг кода, который я не знаю, если вы хотите.Но также есть , эта опция тоже.