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

Question

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

在他们的所有示例中，只添加了必需的属性，例如：

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

如果我要绑定的模型有 IsRequired 属性，那将是 true/false 怎么办？

如果我使用类似的东西：

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

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

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

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

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

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

什么也不起作用：

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

我想我也许可以有一个函数 returns 我的字符串 "required" 基于字段，它只会给出模板错误。

有没有办法完成此操作并只为我的属性呈现 required？或者让 Angular 在其值为 true/false 时识别此属性的方法？

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

Answer 1

基本表单非常适合简单表单，但是当您需要更多控制（就像您在此处拥有的那样）时，也就是您需要开始使用更高级表单的时候。在你的情况下会是什么样子。

@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 {};
  }
}

Note: You will probably need to import the ReactiveFormsModule into your @NgModule. This comes from @angular/forms as well.

还有另一种方法可以使用 here.

中显示的指令执行此操作

Answer 2

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

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

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

what is the proper way to dynamically mark a field as required using Angular 2 Forms?

html5-validation

angular2-forms

angular