Угловые реактивные формы с MatSelect и MatCard - PullRequest
Новая
       26

Угловые реактивные формы с MatSelect и MatCard

0 голосов
/ 09 января 2019

Хорошо, я извлекаю список игр из базы данных и динамически отображаю их в браузере. Я хочу иметь возможность проверять каждый элемент игры, используя количество в угловом материале. Однако я получаю следующую ошибку:

Ошибка: не удается найти элемент управления с путем: «заказы -> количество»

Есть идеи, что я делаю не так? 

 <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]
      })
    )
  });
})

1 Ответ

0 голосов
/ 09 января 2019

Проблема была в шаблоне 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>
...