javascript - 选择选项的自定义属性并从 Angular 5 中的 AbstractControl 访问它？

Question

我想为 select 元素中的每个选项元素创建一个自定义属性，但在创建可通过 AbstractControl 和 event.target 访问的属性时遇到问题。这是我所拥有的:

我尝试创建一个名为 code 的自定义属性，然后尝试使用 id。

<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

但这也不起作用。我已经为选项元素设置了值，所以我无法使用它。该属性必须可通过 AbstractControl 和 event.target 访问。

Answer 1

向组件的 TypeScript 添加属性国家/地区

country: Country; // Whatever type your countries are

然后使用 ngModel 绑定(bind)到国家/地区，并使用 ngValue 作为选项并绑定(bind)到国家/地区对象

<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 模块添加到您的模块中。