得到错误在angular4

-1

initForm() { 

    this.newClientForm = this.fb.group({ 

     userCity: [null, [Validators.required]], 
     userZip: [null, [Validators.required]], 

    } , 

    ); 
    } 

registerUser() { 

    const newUser = this.newClientForm.value; 

    this.user.user_name = newUser.userName; 
    this.user.city = newUser.userCity; 
}

在HTML文件编译：

<section class="col col-6"> 
    <label>Select City</label> 
    <select class="form-control" name="userCity" #userCity 
      (change)="onCitySelect(userCity.value)"> 
     <option></option> 
     <option *ngFor="let city of cities" value="{{city.id}}"> 
      {{city.city_name}} 
     </option> 
    </select> 
</section>

当我注册的形式我得到的用户名，但城市我得到空值，我不知道代码中的错误是什么。

来源

2017-09-13 uma raja

“获得空值”是不是一个编译错误;这是一个运行时错误。这是什么？ – 2017-09-13 12:01:08

您还没有定义的下拉列表中选择任何模型城市：

<select class="form-control" [(ngModel)]="selectedCity" name="userCity" #userCity (change)="onCitySelect(userCity.value)">

现在任何选项，您选择，将其值存储在模型selectedCity。顺便说说你在哪里调用registerUser函数？

来源

2017-09-13 11:46:26

在component.ts只有注册用户我叫 –

当我使用[（ngModel）] =“selectedCity”它会抛出错误 –

添加formControlName在HTML选择

<select class="form-control" formControlName="city" 
    name="userCity" #userCity (change)="onCitySelect(userCity.value)"> 
    <option *ngFor="let city of cities" value="{{city.id}}"> 
     {{city.city_name}} 
    </option> 
</select>

来源

2017-09-13 11:51:45 JayDeeEss

它工作正常 –

两两件事：

正如@JayDeeEss已经提到的，你需要适当的formGroup S和formControlName在你的组件定义添加到您的模板（HTML）。

另外，您使用的第一个<options>标记没有指定value属性。重构，要<option value=""></option>并在您的组件，初始化表单控件值空字符串''，而不是null这样，

this.newClientForm = this.fb.group({ 

    userCity: ['', [Validators.required]], 
    userZip: ['', [Validators.required]], 

}

来源

2017-09-13 12:19:54 amal

得到错误在angular4

回答

相关问题