Question

好，所以我要从数据库中检索游戏列表，并在浏览器中动态显示它们。我希望能够使用角度材料选择中的数量来验证每个游戏项目。但是我收到以下错误：

错误：找不到路径为“订单->数量”的控件

有什么想法我在做什么错吗？

 <mat-card *ngFor="let game of gamesDisplayed; let i=index">
    <mat-card-title>
        <h2 >{{game.Name}}</h2>
    </mat-card-title>
    <mat-card-content>
      <form [formGroup]="form">
        <div formArrayName="orders">
            <mat-form-field>
              <mat-select placeholder="Quantity" formControlName="quantity" required>
                    <mat-option>--</mat-option>
                    <mat-option value="1">1</mat-option>
                    <mat-option value="2">2</mat-option>
                    <mat-option value="3">3</mat-option>
                    <mat-option value="4">4</mat-option>
                    <mat-option value="5">5</mat-option>
                    <mat-option value="6">6</mat-option>
                    <mat-option value="7">7</mat-option>
                    <mat-option value="8">8</mat-option>
                    <mat-option value="9">9</mat-option>
                    <mat-option value="10">10</mat-option>
              </mat-select>
           <mat-form-field>
      </form
    </mat-card-content>
 </mat-card>

constructor(private formBuilder: FormBuilder) {
  this.form = this.formBuilder.group({
    orders: this.formBuilder.array([
      this.formBuilder.group({
        quantity: [{value: '', disabled: false}, Validators.required]
      })
    ])
  })
}

ngOnInit() {
this.gameInventory$.subscribe((games: any) => {
  this.gamesDisplayed = games;
  (<FormArray>this.form.controls['orders']).removeAt(0); //<-- remove empty control
  this.gamesDisplayed.forEach((value) => {
    const control = <FormArray>this.form.controls['orders'];
    control.push(this.formBuilder.group
      ({
          quantity: [{value: '', disabled: false}, Validators.required]
      })
    )
  });
})

Answer 1

问题是HTML模板，我将其固定为：

<form [formGroup]="form"> 
    <mat-card formArrayName="orders" *ngFor="let game of gamesDisplayed; let i=index">
    <mat-card-title>
        <h2 >{{game.Name}}</h2>
    </mat-card-title>
    <mat-card-content>
        <div [formGroupName]="i">
            <mat-form-field>
              <mat-select placeholder="Quantity" formControlName="quantity" required>
                    <mat-option>--</mat-option>
                    <mat-option value="1">1</mat-option>
                    <mat-option value="2">2</mat-option>
                    <mat-option value="3">3</mat-option>
                    <mat-option value="4">4</mat-option>
                    <mat-option value="5">5</mat-option>
                    <mat-option value="6">6</mat-option>
                    <mat-option value="7">7</mat-option>
                    <mat-option value="8">8</mat-option>
                    <mat-option value="9">9</mat-option>
                    <mat-option value="10">10</mat-option>
              </mat-select>
           <mat-form-field>
    </mat-card-content>
 </mat-card>
</form>

MatSelect和MatCard的角反应形式

1 个答案: