Question

我想为select元素中的每个option元素创建一个自定义属性，但是我无法创建可以通过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

但是那也不起作用。我已经为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方法中，可以将componenet上的属性与此this.country一起使用

如果选择错误时没有ngModel属性，则需要将Angular表单模块添加到模块中。

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

1 个答案: