Фильтрация списка флажков в ReactiveForm приводит к ошибке рендеринга

Question

Я создал реактивную форму. Он включает в себя обычные поля ввода, а также несколько флажков в виде списка. Я включил также поле ввода для фильтрации списка флажков. В то время как нормальные символы не вызывают проблем, символ точки (.), Похоже, влияет на отображение флажков.

Если вы ищете "Zwei", все выглядит хорошо. Флажки (флажки) сохраняют свое "проверенное" состояние, даже если впоследствии вы удалили значение поиска.

Если вы сейчас введете «i.null» в поле поиска, все также будет в порядке. Теперь удалите первые два символа и введите их заново; Теперь возникает проблема (рендеринга?). Второй флажок («ZWEI.NULL») отображается как «флажок», но я не нажимал ни отмеченный, ни помеченный как «выбранный» в контроллере. Если вы посмотрите в сообщении formGroup-debug-console (нажав верхнюю кнопку), «selected» -property не определено как «true».

Пример кода: https://stackblitz.com/edit/angular-xuohtg

Я ожидаю, что флажки сохранят свое проверенное состояние. Есть ли у вас какие-либо идеи, как этот эффект играет?

Answer 1

Основная проблема заключается в том, что вы используете 2 разных массива в своем компоненте: один - массив controls в экземпляре FormArray (давайте назовем его ModelArray ) итот, который возвращается после обработки фильтра (назовем его ViewArray ).

Они оба имеют одинаковые FormGroup экземпляры, но в разных порядках.Вы используете ViewArray для генерации своего представления и сопоставляете его индексы с помощью директив FormArrayName и FormGroupName с элементами в ModelArray .

Для индекса I с 0 , в конечном итоге вы увидите значения FormGroup instance A <= ViewArray [I] </em> и привязкупредставление вводит в экземпляр B <= ModelArray [I] </em>, с возможностью A = B === false

Вы можете преодолеть это, связавFormGroup экземпляры для FormArrayName с использованием FormGroupDirective вместо директивы FormGroupName следующим образом:

<div class="form-group"
         formArrayName="permissions">
        <label class="checkboxLabel"
               *ngFor="let permissionGroup of permissionsControl.controls | LockFilter: filter.value; index as i"
               [formGroup]="permissionGroup">
            <input type="checkbox"
                   formControlName="selected">
            ({{ i }}){{permissionGroup.value.label}} ({{permissionGroup.value.id}})
        </label>
    </div>

Рабочий пример можно найти в этом блице