Question

我不了解数组如何以反应形式工作。我得到的只是No value accessor for form control with path 'myArray -> one -> one'。

我很感激有人可以向我解释这是如何运作的以及我需要的模板应该如何完成，谢谢。

这是我得到结构的.ts代码：

constructor(private fb: FormBuilder) {}
ngOnInit() {
  // [...]
  this.myForm = this.fb.group({
    name: ['', Validators.required],
    myArray: this.fb.array([
      {
        one: this.fb.group({
          ...this.myList()
        })
      },
      {
        two: this.fb.group({
          ...this.myList()
        })
      },
      {
        three: this.fb.group({
          ...this.myList()
        })
      }
    ])
  });
}

myList() {
  return {
    one: new FormControl(false),
    two: new FormControl(false),
    three: new FormControl(false),
    four: new FormControl(false)
  };
}

这是我应该将结构放入的.html：

<form [formGroup]="myForm" (ngSubmit)="myFn()">
  <mat-card>
    <mat-form-field>
      <input matInput placeholder="Name" formControlName="name">
    </mat-form-field>
  </mat-card>

  <div formArrayName="myArray">
    <div *ngFor="let child of myForm.controls.myArray.controls; let i = index">
      <div formGroupName="">
        <mat-card>
          <mat-card-title>
            {{ myTitles[i}}
          </mat-card-title>
          <mat-list>
            <mat-list-item>
              <mat-checkbox formControlName="one">one</mat-checkbox>
            </mat-list-item>
            <mat-list-item>
              <mat-checkbox formControlName="two">two</mat-checkbox>
            </mat-list-item>
            <mat-list-item>
              <mat-checkbox formControlName="three">three</mat-checkbox>
            </mat-list-item>
            <mat-list-item>
              <mat-checkbox formControlName="four">four</mat-checkbox>
            </mat-list-item>
          </mat-list>
        </mat-card>
      </div>
    </div>
  </div>
</form>

Answer 1

您需要定义要使用formControlName访问的表单组，我对formGroupName不太确定，但值应该是＆＃34; myArray＆＃34 ;或者＆＃34;孩子＆＃34;

在每种情况下应该使用什么，以及我自己使用的是：[formGroup]="child"而不是formGroupName

不要理解Angular的Form Builder阵列是如何工作的

1 个答案: