Angular 4 Reactive表单中的表格,不起作用

时间:2017-12-01 08:53:54

标签: angular html-table angular-reactive-forms

我想在角形式里面有一个简单的html表,这是我的代码:

//Component ts file
heroForm: FormGroup;

get arrays(): FormArray {
  return <FormArray> this.heroForm.get('Myarray');
}
  constructor (private fb: FormBuilder) {
    this.heroForm = fb.group({
      Myarray : this.fb.array([this.build()])
    });
  }
  build(): FormGroup {
    return this.fb.group({
      carType : [null , Validators.required]
    });
  }
<form [formGroup]="heroForm">
  <table>

    <tr *ngFor="let d of rows ">

      <td>
        <h3>  {{ d.Firstname }}</h3>
      </td>
      <td>
        <h3> {{ d.lastName }}</h3>
      </td>

      <td>
        <div formArrayName="Myarray" *ngFor="let array of arrays.controls; let i=index">

          <div [formGroupName]="i">

            <select formControlName="carType">
            <option selected></option>
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </select>
          </div>
        </div>
      </td>
    </tr>

  </table>
  <button type="submit" (click)="submit()" [disabled] ="!heroForm.valid"> Submit</button>
</form>
我有一个选择字段列 我希望该列中所有选定的carTypes都在formArray中,并且在此之前要禁用该按钮。 firstname和lastname来自json。

有人能帮助我吗?谢谢

0 个答案:

没有答案