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

Question

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

在他们所有的例子中，required 属性只是添加如下：

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

如果我绑定的模型有一个IsRequired 属性，那将是真/假？

如果我使用类似的东西：

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

在页面上呈现如下（注意 ="true"）：

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

由于某种原因，当 Angular 具有实际值（="true"）时，Angular 似乎无法识别此属性，因此当此字段为空白时，我的表单本身仍然有效：

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

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

什么也不起作用：

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

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

有没有办法做到这一点并只为我的属性呈现required？或者当它的值为真/假时，让 Angular 识别这个属性的方法？

FWIW - 我已经验证我可以使用*ngIf 根据我的IsRequired 属性编写两个几乎相同的<input type='text' /> 控件，并使用required 属性硬编码一个控件，但这看起来很hacky。希望有更好的方法！

Answer 1

既然可以这么简单，为什么还要搞得这么复杂，

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

Answer 2

基本表单的内容非常适合简单的表单，但是当您需要像这里所拥有的那样进行更多控制时，您需要开始使用更高级的表单内容。在你的情况下看起来会是这样的。

@Component({
  selector: 'something',
  template: `
  <form #myForm="ngForm">
    <input [(ngModel)]="field.Value" [formContol]="myFieldControl" type="text" [value]="field.Value">
  </form>
  `
})
export class MyComponent{
  public field: any = {Value: 'hello', isRequired: false};
  public myFieldControl: FormControl = new FormControl('', [this.dynamicRequiredValidator.bind(this)]);

  public dynamicRequiredValidator(control: FormControl):{[key: string]: boolean}{
    if(field.IsRequired && !control.value){
      return {required: true};
    }
    return {};
  }
}

注意：您可能需要将ReactiveFormsModule 导入您的@NgModule。这也来自@angular/forms。

还有另一种方法可以使用显示为here 的指令来执行此操作。