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

Question

使用Angular 2(2.0.0),使用Angular Forms 动态标记字段的建议方法是什么？

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

<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")时,它似乎不会识别此属性,所以当此字段为空时,我的表单本身仍然有效:

<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"

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。

您还可以通过另一种方法使用此处显示的指令来执行此操作。