html - Att lägga till formControlName får standardvärdet att försvinna i min forms rullgardinsmeny i Angular

Jag har detta select-element och jag ser något konstigt, när jag lägger till formControlName på taggen visas inte startvärdet "month", men om jag tar bort det visas det men valideras inte korrekt eftersom det inte kan binda.

Här är mitt formulär och HTML

this.registerForm = this.fb.group({
  gender: ['male'],
  email: ['', [Validators.required, Validators.email]],
  username: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(10)]],

  month: ['', Validators.required],
  day: ['', Validators.required],
  year: ['', Validators.required],
  city: ['', Validators.required],
  country: ['', Validators.required],
  password: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(10)]],
  confirmPassword: ['', Validators.required]
}, {
  validator: this.passwordMatchValidator
});
<div class="form-group col-4 col-sm-4 col-md-4">
  <select [ngClass]="{'is-invalid': registerForm.get('month').errors && registerForm.get('month').dirty}" class="form-control" id="inputState1" formControlName="month">
    <option disabled hidden selected>Month</option>
    <option>Jan</option>
    <option>Feb</option>
    <option>Mar</option>
    <option>Apr</option>
    <option>May</option>
    <option>Jun</option>
    <option>Jul</option>
    <option>Aug</option>
    <option>Sep</option>
    <option>Oct</option>
    <option>Nov</option>
    <option>Dec</option>
  </select>
  <div class="invalid-feedback" *ngIf="registerForm.get('month').dirty && registerForm.get('month').hasError('required')">Month required</div>
</div>

och här är vad jag ser

formControlName="month"

och nu när jag tar bort

formControlName="month"

Jag ser detta

Svar #1

Vänligen lägg till värdeattributen till option-elementen.

<form [formGroup]="registerForm">
  <div>
  <input formControlName="email">
  </div>
  <div>
  <select class="form-control" formControlName="month">
      <option value="" hidden selected>Select a month</option>
      <option value="1">Jan</option>
      <option value="2">Feb</option>
  </select>
  </div>
  </form>

Fungerande kod här: https://angular-reactive-form-dropdown.stackblitz.io

Svar #2

I din FormGroup behöver du ange värdet på samma sätt som i HTML:

<select class="form-control" formControlName="template">
  <option value="">-- Choose template --</option>
  <option *ngFor="let template of templates" [value]="template">{{ template }}</option>
</select>

this._form = new FormGroup({
  'template': new FormControl('', Validators.required)
});

Relaterade artiklar