typescript - Hur man dynamiskt ställer in valt rullgardinsvärde i Angular 5

Jag försöker ställa in det valda värdet på en rullgardinsmeny i Angular 5.

HTML :

<mat-form-field class="col-sm-3">
   <mat-select placeholder="State" name="state [formControl]="stateFormControl" required>
     <mat-option *ngFor="let state of states" value="{{state.key}}">{{state.name}}
     </mat-option>
   </mat-select>
   <mat-error *ngIf="stateFormControl.hasError('required')">State is required
   </mat-error>
</mat-form-field>

TypeScript :

stateFormControl = new FormControl('', [
    Validators.required
]);

this.vendorForm.controls["state"].setValue(this.state);

Även när jag anger standardvärdet i FormControl-deklarationen, sätts inget som standard för rullgardinsmenyn.

Svar #1

Bind till värdeattributet i din <option>-tagg:

<mat-select placeholder="State" name="state [formControl]="stateFormControl" required>
     <mat-option *ngFor="let state of states" [value]="state.key">{{state.name}}
     </mat-option>
</mat-select>

Svar #2

Du borde prova detta:

this.stateFormControl.setValue(this.state);

eller

<mat-form-field class="col-sm-3">
   <mat-select placeholder="State" name="state" formControlName="state" required>
     <mat-option *ngFor="let state of states" value="{{state.key}}">{{state.name}}
     </mat-option>
   </mat-select>
   <mat-error *ngIf="stateFormControl.hasError('required')">State is required
   </mat-error>
</mat-form-field>

Om du bestämmer dig för att ändra din HTML, följ då denna handledning om reaktivt formulär

Så du kommer att bygga ditt formulär med något som detta

buildForm(){
    this.vendorForm = this.fb.group({
      state: ['', Validators.required ], // <--- You don't need to instantiate FormControls
    });
}

och du kommer att ha detta någon annanstans

<form [formGroup]="vendorForm">

Relaterade artiklar