使用Angular 2表单动态标记字段所需的正确方法是什么? [英] what is the proper way to dynamically mark a field as required using Angular 2 Forms?

问题描述

使用Angular 2(2.0.0)，建议使用

Using Angular 2 (2.0.0), what is the recommended way to dynamically mark a field as required, using Angular Forms?

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

In all of their examples, the required attribute is just added like:

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

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

What if the model I'm binding to has an IsRequired property, that will be true/false?

如果我使用类似的东西:

If I use something like:

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

在页面上呈现的样子(请注意 ="true" ):

That renders on the page like (note the ="true"):

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

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

For some reason, Angular doesn't appear to recognize this attribute when it has an actual value (the ="true") so when this field is blank, my form itself still is valid:

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

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

So it would appear that I must use required and not required="true", but how can I add that attribute in dynamically?

什么也不起作用:

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

以为我也许可以有一个函数根据字段返回我的字符串"required"，而该函数只给出模板错误.

Thought I might be able to have a function that returns my string "required" based on the field, that just gives templating errors.

是否有一种方法可以完成此操作，并且仅呈现我属性的 required ?还是让Angular在属性值为true/false时识别此属性的方法?

Is there a way to accomplish this and render only required for my attribute? Or a way to make Angular recognize this attribute when it has a value of true/false?

FWIW-我已验证可以根据自己的需要使用 * ngIf 编写两个几乎相同的< input type ='text'/> 控件 IsRequired 属性，并使用 required 属性对其中的一个进行硬编码，但这似乎很棘手.希望有更好的方法！

FWIW - I've verified that I can use *ngIf to write two near-identical <input type='text' /> controls based on my IsRequired property and hardcode one with the required attribute but that seems pretty hacky. Hoping there's a better way!

推荐答案

基本表单内容非常适合简单表单，但是当您需要更多控件(如此处的控件)时，即当您需要开始使用更高级的表单时形式的东西.在您的情况下，看起来像是这样.

The basic forms stuff is great for simple forms, but when you need more control like what you have here, that is when you need to start using the more advanced form stuff. What that would look like in your case would be something like this.

@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 .

还有另一种方法可以使用显示在

There is also another way you can do this with a directive shown here.

这篇关于使用Angular 2表单动态标记字段所需的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！