Question

我正在尝试使用下拉列表在angular2中进行双向绑定。如果没有选择任何值，我还想要使表单无效。以下是我的代码。

<form clas="form-horizontal" (ngSubmit)="submit(frm)" #frm="ngForm">
    <div class="form-group">
        <label class="control-label col-sm-2 selectBox" >Type</label>
        <!--<select class="form-control col-sm-4" name="type" ngModel>
            <option value="select" >Select</option>
            <option value="Free" >Free</option>
            <option value="Paid" >Paid</option>
        </select>-->
            <select name="type"  class="form-control col-sm-4" [(ngModel)]="selectedValue.value" #selects="ngModel" (change)="selection($event)" required>
                <option *ngFor="let item of sel" [value]="item.value" [disabled]="item.type=='Select'">{{item.type}}</option>
        </select>
        <div *ngIf="selects.invalid">
            select your type
        </div>
    </div>  
    <div class="form-group">
        <button class="btn btn-default">Submit</button>
    </div>
</form>

组件文件是

import { Component}  from '@angular/core';
import { colorPreference } from '../colorPreference';
import {NgForm } from '@angular/forms';
@Component({
    templateUrl:'./test.html',
    styleUrls:['./test.scss']
})
export class testComponent{
    sel=[{type:'Select',value:''},{type:'Free',value:'Free'},{type:'Paid',value:'Paid'}];
    selectedValue=this.sel[0];
    constructor(private colorService:colorPreference)
    {

    }

    submit(form:NgForm) {
        console.log(form.value);
    }
    selection(event:any) {
        console.log(event.target.value);
            this.selectedValue=null;
            for(var i=0;i<this.sel.length;i++)
            {
                console.log(this.sel[i].type+" value is "+this.sel[i].value);
                if(this.sel[i].value==event) {
                    this.selectedValue=this.sel[i];
                }
            }
    }
}

但是当我更改下拉列表值时会显示错误

test.html:11 ERROR TypeError: Cannot read property 'value' of null

任何人都可以帮我解决这个问题吗？

Answer 1

您收到此错误的原因因为：

test.html：11 ERROR TypeError：无法读取null
的属性“value”

当您更改下拉值时，它会将值传递给ngModel，但在ngModel中您有[(ngModel)]="selectedValue.value"

解决方案：

改变这个：

selectedValue=this.sel[0];至selectedValue=this.sel[0].value;

和

[(ngModel)]="selectedValue.value"至[(ngModel)]="selectedValue"

角度2中下拉列表的双向绑定和验证

1 个答案: