Предварительно заполните флажки в Angular 5

В проекте Angular 5 у меня есть форма, управляемая шаблоном, которая предварительно заполняется следующим массивом:

let data = [{
    Title: "My Title",
    Description: "My description",
    Value: "my_value",
    Category: "category_name",
    SelectionType: SelectionDisplayType.Checkbox,
    Selected: false
}]

Вот html:

<ul>
     <li *ngFor="let item of data; let i = index;">
          <label [for]="item.Title">{{ item.Title }}</label>
          <input ngModel #columnValuesInputs 
            [id]="item.Title" 
            [name]="item.Category" 
            [type]="((item.SelectionType === SelectionType.Checkbox) ? 'checkbox' : 'radio')" 
            [checked]="((item.Selected) ? 'checked' : '')" 
            [value]="item.Value" />
     </li>
</ul>

Моя проблема заключается в том, что все атрибуты «значения» поля ввода заполняются кроме для флажков и переключателей, хотя я привязываю item.Value к свойству [value]. Итак, когда я вывожу значения через {{ formFilter.value | json }}, значения флажка и переключателя пусты.

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

Пожалуйста, может кто-нибудь пролить свет на то, что я делаю неправильно??


angular angular-forms ngfor dynamicform
person vicgoyso    schedule 26.06.2018    source источник
comment
попробуйте использовать [ngModel]=item.Selected   -  person Krishnanunni Jeevan    schedule 26.06.2018
comment
@Krishnanunni Jeevan, теперь я получаю строку false в качестве значения, когда флажок установлен. Ваше решение близко, но не совсем правильно. Предпочтительно изначально его false (логическое значение или строка), затем при проверке значение обновляется до true (логическое значение или строка), спасибо.   -  person vicgoyso    schedule 26.06.2018
comment
напишу как ответ   -  person Krishnanunni Jeevan    schedule 26.06.2018

Ответы (3)


arrow_upward
1
arrow_downward

Лично с добавлением Reactive Forms. Я вообще отказался от ngModel.

private form: FormGroup;

constructor(private formBuilder: FormBuilder){}

ngOnInit(){
   this.form = this.formBuilder.group({
     Title: "My Title",
     Description: "My description",
     Value: "my_value",
     Category: "category_name",
     SelectionType: SelectionDisplayType.Checkbox,
     Selected: false
    })
}

<div *ngIf="form" [formGroup]="form">
  <input formControlName="Value" />
</div>
person andrew ferguson    schedule 26.06.2018
comment
Спасибо, да, реактивные формы предпочтительнее, однако я ограничен формами, управляемыми шаблонами, для этого проекта, извините, забыл упомянуть об этом, вопрос обновлен. - person vicgoyso; 26.06.2018

arrow_upward
0
arrow_downward

Попробуйте использовать

[ngModel]="item.Selected"

Это односторонняя привязка. Если вам нужно получить двустороннюю привязку (не рекомендуется), используйте: -

[(ngModel)]="item.Selected"

Это позаботится о действиях при проверке. Другой вариант - сохранить одностороннюю привязку и прослушивать изменение ввода (должно обрабатываться по-разному для переключателя)

[ngModel]="item.Selected"  (click)="item.Selected=!item.Selected"

https://stackblitz.com/edit/angular-6-checkbox-69tnvh?file=src%2Fapp%2Fapp.component.html

person Krishnanunni Jeevan    schedule 26.06.2018
comment
По какой причине вы бы не рекомендовали двухстороннюю привязку в этом случае? - person Simon K; 26.06.2018
comment
Пробовал [(ngModel)]=item.Selected... тем не менее, когда я проверяю параметр, значение обновляется с: false на: false. Также я хотел бы избежать обработки изменения ввода. - person vicgoyso; 26.06.2018
comment
@vicgoyso, item.Category уникальна? Все входы должны иметь уникальное имя. Если категория не уникальна, используйте что-то вроде name=item.category_{{i}}. - person Krishnanunni Jeevan; 26.06.2018
comment
@SimonK, просто мое мнение после того, как я увидел преимущества использования однонаправленного потока данных. Вы всегда можете использовать (ngModelChange)=item.Selected=!item.Selected. Но опять же, я могу ошибаться, так как я не видел весь проект, 2-сторонняя привязка здесь может быть лучше. - person Krishnanunni Jeevan; 26.06.2018
comment
@Krishnanunni Jeevan, item.Category уникален для флажков, но не для переключателей - person vicgoyso; 26.06.2018
comment
@vicgoyso, я думаю, это связано с динамическим изменением типа ввода в зависимости от условия. Попробуйте использовать ngIf для флажка и переключателя. Я создал ссылку: - stackblitz .com/edit/ - person Krishnanunni Jeevan; 26.06.2018

arrow_upward
0
arrow_downward

используйте это

 [checked]="((item.Selected) ? true : false)"
person Trilok Singh    schedule 20.02.2020