Question

component.ts

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>

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

Answer 1

您尚未为城市的选择下拉列表定义任何模型：

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

现在无论您选择哪个选项，其值都将存储在模型selectedCity中。顺便问一下你在哪里调用registerUser函数？

Answer 2

在你的html选择

上添加formControlName

    <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>

Answer 3

2件事：

正如@JayDeeEss已经提到的，您需要将组件中定义的相应formGroup和formControlName添加到模板（html）。

此外，您使用的第一个<options>代码未分配value属性。重构为<option value=""></option>以及您的组件，将表单控件值初始化为空字符串''而不是null，这样，

this.newClientForm = this.fb.group({

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

}

在angular4中编译时出错

3 个答案: