Установите значение выбора ввода через значение Angular FromControl

Question

Может кто-нибудь сказать мне, как я могу установить начальное значение ниже, выберите?Я пытался сделать это через свой formControl, и хотя значение в форме будет правильным, оно не отражается в представлении

HTML:

<mat-form-field>
 <mat-select name="animationType" formControlName="animationType" 
  placeholder="select animation">

  <mat-option *ngFor="let type of animationTypes" [value]="type">
   {{type.name}}
  </mat-option>

 </mat-select>
</mat-form-field>

TS:

  animationTypes = [
    { name: 'balloon' },
    { name: 'kite' },
    { name: 'wolf' }
  ];

Answer 1

Кажется, единственное решение, которое я нашел, это подключить ngModel к селекту следующим образом.

<mat-form-field>
 <mat-select name="animationType" formControlName="animationType" 
  placeholder="select animation" [(ngModel)]="selectedAnimType">

  <mat-option *ngFor="let type of animationTypes" [value]="type.name">
   {{type.name}}
  </mat-option>
 </mat-select>
 <mat-error *ngIf="poemForm.controls.animationType.invalid">{{getErrorMessage()} 
 </mat-error>
</mat-form-field>

Answer 2

Я вижу, вы использовали formControlName, поэтому вы можете установить значение по умолчанию непосредственно из файла TS, например:

HTML:

<mat-form-field>
    <mat-select name="animationType" formControlName="animationType" placeholder="select animation">
        <mat-option *ngFor="let type of animationTypes" [value]="type">
            {{type.name}}
        </mat-option>
    </mat-select>
    <mat-error *ngIf="poemForm.controls.animationType.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>

TS:

  ngOnInit() {
    this.poemForm.patchValue({ 
      animationType: selectedAnimationType // Selected Value E.g. this.animationTypes[0]
    });
  }