Angular

Question

<form [formGroup]="form">
    <select name="area_id" formControlName="area_id">
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
        <option value="3">Value 3</option>
    </select>
</form>

<pre>{{ form.value | json }}</pre>

如果我select一个选项，值将是字符串。如何强制该值为整数？

Answer 1

对非字符串的值使用ngValue

<form [formGroup]="form">
    <select name="area_id" formControlName="area_id">
        <option [ngValue]="1">Value 1</option>
        <option [ngValue]="2">Value 2</option>
        <option [ngValue]="3">Value 3</option>
    </select>
</form>

我自己还没有用模型驱动表单尝试过，只有

<select [(ngModel)]="someField" name="area_id" formControlName="area_id">

但它可能仍然有效。

Answer 2

代码附在下方

@Component({
    selector: 'my-app',
    template: `<select [(ngModel)]="selectedVal" (change)="handleSelectionChange()">
                    <option *ngFor="let item of list" [ngValue]="item.id" >
                        {{item.text}}
                    </option>
                </select>
              `
})

export class MainComponent {
    list: [] = [{
        id: 12,
        text: 'Suneet'
    }, {
        id: 13,
        text: 'Bansal'
    }];

    handleSelectionChange() {
        alert(this.selectedVal);
    }
}

Angular - 强制 select 值为整数

Angular - Force select value to be integer

angular2-forms