Question

我是Angular 2的新手，所以我需要你的建议才能实现发展我正在处理创建/更新表单组件。我有一个带有默认值的复选框列表（选中或不选中，它取决于服务）。这是我的代码：

@Component({
  selector: 'app-campaign',
  template: `
  <form [formGroup]="campaignForm" (ngSubmit)="saveCampaign()" novalidate>
    <label for="formations">Formations</label>
    <ul *ngFor="let formation of formations">
      <li>
        <label>
          <input 
            type="checkbox" 
            [attr.checked]="formation.formationCochee == 1 ? 'checked' : null">
            {{formation.formation}}
        </label>
      </li>
    </ul>
    <input 
      type="submit" 
      class="btn btn-primary" 
      value="Save" 
      [disabled]="campaignForm.invalid"/>
  </form
  `,
  styleUrls: ['./campaign.component.css'],
  providers: [CampaignService, FormationService]
})
export class CampaignComponent implements OnInit {

  id: number = 0;
  campaignForm: FormGroup;        
  title: string = "New campaign";
  errorMessage: any;
  formations: Formation[];

  constructor(
    private _fb: FormBuilder,
    private _campaignService : CampaignService,
    private _formationService: FormationService
    ) { 
      this.campaignForm = this._fb.group({  
        id: ''
        , description: ["", Validators.required]
        // ...
      });

      if (this._avRoute.snapshot.params["id"]) {
        this.id = parseInt( this._avRoute.snapshot.params["id"]);
      }
    }

  ngOnInit() {
    // Case : Update Form
    if(this.id > 0){ 
      this.title = 'Update';    
      this._formationService.selectedFormations(this.id)
      .subscribe(formations =>
        this.formations=formations['records']
      );
    } 
    // Case : Create Form
    else {
      this._formationService.listActiveFormations()
      .subscribe(formations =>
        this.formations=formations['records']
      );
    }
  }

  saveCampaign(){ 
    this._campaignService.saveCampaign(this.campaignForm.value)
    .subscribe(campaign => {
        this._router.navigate(['campaigns']);
     }, error => this.errorMessage = error )
  }
}

我的问题：

如何设置复选框列表的默认数据？
当用户选中或取消选中复选框时，是否可以更新这些默认值？
FormArray是解决问题的好方法吗？
请告诉我，如果你在我的代码中看到了坏习惯，我就不会有任何回报...我已经问了很多但是我被困了一段时间了...

PS：我试图在没有现有组件的情况下尝试改善我的angular2技能。

为您提供建议

Answer 1

如何设置复选框列表的默认数据？

 [attr.checked]="formation.formationCochee">

在JS中，您有 truthy 和 falsy 值。例如，1是一个真值，意思是is true。 Angular将了解您要执行的操作，并选中您的复选框。

当用户选中或取消选中复选框时，是否可以更新这些默认值？

否即可。如果用户更新默认值，那么它不再是默认值！否则我没有得到你的问题，也许你可以改一下吗？

FormArray是解决问题的好方法吗？

你的问题到底是什么？您没有指定任何问题，您只问了问题......

如果您在我的代码中看到不良习惯，请告诉我

<ul *ngFor="let formation of formations">

您应该在li标记上重复：ul / ol标记只是列表容器，而li是列表项。

<label>
      <input 
        type="checkbox" 
        [attr.checked]="formation.formationCochee == 1 ? 'checked' : null">
        {{formation.formation}}
    </label>

标签不包含输入。标签用于描述输入，这意味着它能够使用for属性与输入进行交互。

Answer 2

您可以在这种情况下使用FormArray来迭代formations中的数据，并将每个对象作为FormGroup推送到表单中的FormArray。

或者，您只需提交表单，就可以使用FormArray的值填充formations。

使用后一个选项，就像你一样，迭代数组并显示复选框。您可以代替[attr.checked]使用[(ngModel)]。有了这个，你需要添加[ngModelOptions]="{standalone: true}，因为这是一个被动的形式。所以你的清单应该是这样的：

<ul>
  <li *ngFor="let formation of formations">
    <label>
      <input 
        type="checkbox" 
        [(ngModel)]="formation.formationCochee"
        [ngModelOptions]="{standalone: true}">
        {{formation.formation}}
    </label>
  </li>
</ul>

创建表单时，为数组添加一个空的FormArray：

this.campaignForm = this.fb.group({
  formations: this.fb.array([])
});

然后，当您提交表单时，可以将FormArray替换为空formations：

saveCampaign(){ 
  this.campaignForm.setControl('formations', this.fb.array(this.formations))
  this._campaignService.saveCampaign(this.campaignForm.value)
    .subscribe(campaign => {
       this._router.navigate(['campaigns']);
    }, error => this.errorMessage = error )
}

复选框列出表单中的值

2 个答案: