angular - 为什么选项选择反应形式角度不起作用?
问题描述
我正在使用 Angular 5 构建反应式表单,我正在尝试使用列表中的选项添加选择,但该列表不存在于 html 页面中。我看到了一些类似的问题并尝试了建议的答案,但没有成功,我做错了什么?
ts:
firstQuestionnaire: FormGroup;
yearsCurrentHome: string [] = ['1','2','3','4','5+'];
default: string = '1';
constructor(private formBuilder: FormBuilder) {
this.firstQuestionnaire=this.createFormGroup();
this.firstQuestionnaire.controls['yearsInCurrentHome'].setValue(this.default, {onlySelf: true});
}
createFormGroup() {
return new FormGroup({
yearsInCurrentHome: new FormControl(null)
});
}
HTML:
<div class="question">
<label>YEARS: </label>
<select formControlName="yearsInCurrentHome">
<option *ngFor="let year of yearsCurrentHome" [ngValue]="year"> {{year}}
</option>
</select>
</div>
谢谢
解决方案
您需要在 html 中包含 form 标记,如下所示:
<form [formGroup]="firstQuestionnaire">
<select formControlName="yearsInCurrentHome">
<option *ngFor="let year of yearsCurrentHome" [ngValue]="year"> {{year}}
</option>
</select>
</form>
推荐阅读
- winforms - 如何知道 WinForms 是否可以渲染某些菜单字体?
- sql - 如果其他列具有特定值,则使该列成为必填列
- python - Pandas - Groupby 并聚合多列
- asp.net-core - 覆盖 InputTagHelper 时,TagHelper PreContent 和 PostContent 未显示在 HTML 中
- android - React Native Release Signed APK 在应用启动时崩溃
- node.js - 如何在 Graphql 中删除自省查询的身份验证
- sql - 比较 2 个表(基于辅助表插入、更新或删除)
- javascript - 从 api pull 映射后无法访问数组中的数据
- javascript - 如何让我的服务器返回正确的 Sec-WebSocket-Accept 标头值?
- javascript - 如何打开一个 div,然后单击将一个 div 添加到列表中的下一个项目