angular - 使用 Angular 2 Forms 根据需要动态标记字段的正确方法是什么？

Question

使用 Angular 2 (2.0.0)，动态根据需要标记字段的推荐方法是什么，使用 Angular Forms ？

在他们所有的示例中，所需的属性只是添加如下:

<input type="text" class="form-control" id="name" required>

如果我要绑定(bind)的模型有 IsRequired 怎么办？属性，那将是真/假？

如果我使用类似的东西:

<input [(ngModel)]="field.Value" type="text" value="{{field.Value}}" [attr.required]="field.IsRequired"/>

在页面上呈现如下(注意 ="true"):

<input type="text" required="true" />

出于某种原因，当它具有实际值(="true")时，Angular 似乎无法识别该属性，因此当该字段为空时，我的表单本身仍然有效:

<form class="ng-untouched ng-pristine ng-valid">

所以看起来我必须使用 required而不是 required="true" ，但如何动态添加该属性？

什么也不起作用:

<input type="text" {{ getRequiredAttr(field) }} />

我想我也许可以有一个函数根据字段返回我的字符串“required”，但它只会给出模板错误。

有没有办法完成这个并且只渲染 required为了我的属性？或者有一种方法可以让 Angular 在该属性的值为 true/false 时识别它？

FWIW - 我已经确认我可以使用 *ngIf写两个近乎相同的<input type='text' />基于我的 IsRequired 的控件属性和硬编码一个与 required属性，但这看起来很老套。希望有更好的方法!

Answer 1

既然可以简单地做到这一点，为什么要把它搞得这么复杂，

[required]="isFieldRequired() ? 'required' : null"