如何使用 Angular2 ReactiveFormsModule 将数组绑定到复选框？

Question

我是 Angular2 的新手（昨天开始），在此之前不是 Angular 用户。我的问题是如何将数组绑定到 ReactiveFormsModule 中的复选框？ 下面是我丢失的拼图代码。

<!-- profile.ts -->
export class UserProfileComponent {
    status = {
        ready: false,
        saving: false
    };
    form: FormGroup;
    masterData = {
        skills: [{ id: 'js', text: 'Javascript' }, { id: 'cs', text: 'C#' }]
    };
    constructor(FB: FormBuilder) {
        let self = this;

        self.form = FB.group({
            name: new FormControl('', Validators.required)
            , gender: new FormControl('', Validators.required)
            , skills: new FormArray([])
        })
        self.getProfile()
            .then(profile => {
                return self.loadFormData(profile);
            }).then(() => {
                this.status.ready = true
            });
    }
    getProfile() {
        return new Promise((done, fail) => {
            let sample = { name: 'me', gender: 'm', skills: ['js']};
            done(sample);
        })
    }
    loadFormData({ name, gender, skills = []}) {
        let self = this
            , form = self.form

        return new Promise((done, fail) => {
            form.get('name').setValue(name);
            form.get('gender').setValue(gender);

            skills.reduce((array: FormArray, skill: string) => {
                array.push(new FormControl(skill));
                return array;
            }, form.get('skills'));
            done();
        });
    }
    selectSkill (event, skill) {
        let skills = this.form.get('skills')
            , checked = event.target.checked
            ;

        let index = skills.value.indexOf(skill);
        if (checked === true && index < 0) {
            skills.push(new FormControl(skill));
        } else if (checked === false && index >= 0) {
            skills.removeAt(index);
        }
    }   
};  


<!-- profile.html -->
<div class="title">Profile</div>
<div>
    <form [formGroup]="form" (ngSubmit)="submitForm()">
        <div class="form-group">
            <label for="name">Name</label>
            <input formControlName="name" name="name" class="form-control" placeholder="Name" type="text">
        </div>
        <div class="form-group">
            <label>Gender</label>
        </div>
        <div class="radio-inline">
            <label><input type="radio" name="gender" value="m" formControlName="gender"> Male</label>
        </div>
        <div class="radio-inline">
            <label><input type="radio" name="gender" value="f" formControlName="gender"> Female</label>
        </div>
        <div class="form-group">
            <label>Skill {{ skills }}</label>
        </div>
        <div *ngFor="let skill of masterData.skills">
            <div class="checkbox-inline"><label>
                <input type="checkbox" name="skill" (change)="selectSkill($event, skill.id)"> {{ skill.text }}
            </label></div>
        </div>
        <div>
            <button type="submit" class="btn" [disabled]="form.invalid">Save</button>
        </div>
    </form >
</div>

除了我不知道如何根据我的示例数据在表单加载后检查技能复选框外，一切正常？

Answer 1

你必须使用FormArrayName 指令：

// 组件

public allSkills = [
  { value : 'cs', label : 'C#' },
  { value : 'js', label : 'Javascript' }
];

constructor(FB: FormBuilder) {
    this.form = FB.group({
        name: new FormControl('', Validators.required),
        gender: new FormControl('', Validators.required),
        skills: new FormArray([])
    });
    for(let skill on this.allSkills) {
      this.form.get('skills').push(new FormControl());
    }
}

// HTML

<form [formGroup]="form" (ngSubmit)="submitForm()">
  <div class="form-group">
    <label for="name">Name</label>
      <input formControlName="name" name="name" class="form-control" placeholder="Name" type="text">
  </div>
  <div class="form-group">
    <label>Gender</label>
  </div>
  <div class="radio-inline">
    <label><input type="radio" name="gender" value="m" formControlName="gender"> Male</label>
  </div>
  <div class="radio-inline">
    <label><input type="radio" name="gender" value="f" formControlName="gender"> Female</label>
  </div>
  <div class="form-group">
    <label>Skills</label>
  </div>
  <div formArrayName="skills">
    <div class="checkbox-inline" *ngFor="let skill of skills.controls; let i=index">
      <label>
        <input type="checkbox" [formControlName]="i" [value]="allSkills[i]['value']"/> {{allSkills[i]['label']}}
      </label>
    </div>
  </div>
  <button type="submit" class="btn" [disabled]="form.invalid"> Save </button>
</form>