Пользовательский атрибут для выбора опции и доступа к нему из AbstractControl в Angular 5?

Question

Я хотел бы создать собственный атрибут для каждого элемента option в элементе select, но у меня возникли проблемы при создании атрибута, к которому можно получить доступ через AbstractControl и event.target.Вот что у меня есть:

Я попытался создать собственный атрибут с именем code, затем попытался использовать идентификатор.

<select id="country" formControlName="country" class="form-control" (change)="getStates($event.target.value, $event.target.id)">
    <option id = "{{cntry.code}}" *ngFor="let cntry of countries" [value]="cntry.id" [attr.code] = "cntry.code">{{cntry.name}}</option>
</select>

В другом месте кода у меня есть:

editForm.controls['country'].id

Ранее я пробовал

editForm.controls['country'].code

, но это тоже не сработало.У меня уже есть значение для элемента option, поэтому я не могу его использовать.Атрибут должен быть доступен через AbstractControl и event.target.

Answer 1

Добавьте страну свойств в ваш TypeScript для компонента

country: Country; // Whatever type your countries are

, затем используйте ngModel для привязки к стране и используйте ngValue для параметров и привязки к объектам страны

<select id="country" formControlName="country" class="form-control" [(ngModel)]="country" (change)="getStates()">
    <option *ngFor="let cntry of countries" [ngValue]="cntry">{{cntry.name}}</option>
</select>

Затем в вашем методе getStates вы можете использовать свойство в компоненте с this.country

Если вы получили свойство no ngModel при ошибке выбора, вам нужно добавить модуль Angular forms в ваш модуль.