предварительно заполнить флажки Angular 5 - PullRequest
Новая
       22

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

0 голосов
/ 26 июня 2018

в проекте 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>

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

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

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

Ответы [ 2 ]

0 голосов
/ 26 июня 2018

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

[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

0 голосов
/ 26 июня 2018

Лично с добавлением реактивных форм.Я полностью отказался от 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>
...