ngModel 的 Angular2 选择为空（模板驱动）答案

【问题标题】：Angular2 select with ngModel is empty (template driven)ngModel 的 Angular2 选择为空（模板驱动）
【发布时间】：2017-01-05 23:49:43
【问题描述】：

我有一个由数组填充的选项。不幸的是，即使第一个选项具有属性selected，也没有选择任何内容。

@Component({
  selector: 'app-root',
  template: `
    <select name="fruits" [ngModel] required>
      <option *ngFor="let fruit of selectData;" [ngValue]="fruit">{{fruit}}</option>
    </select>
  `
})
export class AppComponent {
  selectData = ['Apple', 'Banana', 'Cherry', 'Kiwi'];
}

更糟糕的是：如果我通过 [attr.selected]="i == 0" 将 selected 属性添加到第一个元素，则选择有效（它是必需的）但仍然没有显示选定值。这可能是一个错误吗？

【问题讨论】：

标签： angular angular-ngmodel

【解决方案1】：

代码示例

使用模板驱动的表单非常容易。但让您对验证的控制较少。

<select name="fruits" [ngModel] required>
<option value="" disabled selected>Select your option</option>
      <option *ngFor="let fruit of selectData;" [ngValue]="fruit">{{fruit}}</option>
    </select>

模板驱动示例

 <select class="form-control" id="state" required [(ngModel)]="address.state" name="state" #state="ngModel">
 <option value="" disabled selected>Select your option</option>
<option *ngFor="let state of states" [value]="state">{{state}}</option>
 </select>

模型驱动示例

这是一个模型驱动的示例。您可以使用模型驱动表单更好地控制表单，但您尝试完成的这个特定任务很简单。使用模板驱动我相信您需要做的就是添加一个占位符。

这是我处理向组合框添加状态的方式，

在component.html文件中，

<select (blur)="stateValidate('State *Required', 'State Name')"          
    class="form-control" id="state_address" formControlName="state_address">
    <option *ngFor="let state of states">{{state}}</option>
</select>

在component.ts文件中，

states = ['Select State', 'Alabama', 'Alaska', 'American Samoa', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'District of Columbia', 'Federated States of Micronesia', 'Florida', 'Georgia', 'Guam', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Marshall Islands', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Northern Mariana Islands', 'Ohio', 'Oklahoma', 'Oregon', 'Palau', 'Pennsylvania', 'Puerto Rico', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virgin Island', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

说明

注意第一个值是Select State。在我的情况下，除非用户将其更改为实际状态，否则这不会验证。

也就是说，如果用户确实将其更改为一个状态，然后返回到“选择状态”，它确实会验证并允许提交表单。

请注意，在此图中，状态字段为 red 无效，而表单 Update button 处于非活动状态，因为表单中的所有字段均无效。

我添加的模糊功能

我进一步验证并添加了模糊功能。这样，当用户离开输入字段时，我可以立即检查他们是否输入了可接受的内容。只是为了让您了解这里的外观是当您离开combobox 进行状态选择时调用的模糊函数。

stateValidate(ErrorTitle, ErrorMessage) {
        if (this.profileForm.get('state_address').status == VALID) {
            this.toastSuccess("State Entered", "State entered correctly");
        } else {
            this.toastWarning(ErrorTitle, ErrorMessage);
        }
    }

如果此输入字段无效，则会出现提示用户正确填写的提示。您可以使用相同的方法来检查输入字段的值，并确保在我的情况下它不是Select State。

【讨论】：

嘿，我更新了我的代码。使用您的代码检查第一个示例。如果您使用的是模板驱动的表单，您应该能够添加一个选项并将其禁用。您可以看到第二个示例是使用我在组合框中使用模板驱动表单进行状态选择时的代码。然后第三个例子是模型驱动的表单。但要让模型驱动发挥作用，还有很多工作要做。
即使我不想要“选择您的选项”默认值我试过你的例子，但仍然选择是空的。

【解决方案2】：

解决这个问题的方法可能是（虽然相当丑陋）

<select name="fruits" [(ngModel)]="fruit" required>
  <option *ngFor="let fruit of selectData;" [ngValue]="fruit">{{fruit}}</option>
</select>

在你的组件中你可以给它一个默认值：

this.fruit = this.selectData[0];

【讨论】：