Question

在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 ”绑定到了<复选框>和单选按钮，所有输入字段的“值”属性都被填充除外。 “ [值] ”属性。因此，当我通过{{formFilter.value | json}，复选框和单选按钮的值为空。

反应形式是可取的，但是不限于使用模板驱动的形式。

请告诉我我在做什么错吗？

Answer 1

个人，并添加了反应形式。我已经完全放弃了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>

Answer 2

尝试使用

[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

Answer 3

使用此功能

 [checked]="((item.Selected) ? true : false)"

预填充复选框Angular 5

3 个答案: