У меня есть этот элемент выбора, и я вижу что-то странное, когда я добавляю formControlName в тег, начальное значение «месяц» не отображается, но если я его удаляю, он отображается, но не проверяется правильно, потому что он может " т связывать.
Вот моя форма и 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>
и вот что я вижу
formControlName = "month"
и теперь, когда я удаляю
formControlName = "month"
я вижу это
Пожалуйста, добавьте атрибуты value к элементам option.
<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>
Рабочий код здесь: https://angular-reactive-form-dropdown.stackblitz.io
В вашем FormGroup
нужно указать значение так же, как и в 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)
});