使用ngModel的Angular2选择为空（模板驱动）

Question

我有一个由数组填充的选项。遗憾的是，即使第一个选项具有属性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"将所选属性添加到第一个元素，则select是有效的（它是必需的）但仍然没有显示选定的值。这可能是个错误吗？

Answer 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);
        }
    }

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

Answer 2

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

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

在您的组件中，您可以为其指定默认值：

this.fruit = this.selectData[0];