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

问题描述

使用 Angular 2 (2.0.0)，使用?

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

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

如果我使用类似的东西:

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

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

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

什么也不起作用:

我想我可能有一个函数可以根据字段返回我的字符串required"，这只会给出模板错误.

有没有办法实现这一点，并且只为我的属性呈现 required ?或者有什么方法可以让 Angular 在这个属性的值为 true/false 时识别它?

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

解决方案

基本表单的东西非常适合简单的表单，但是当您需要像这里所拥有的那样进行更多控制时，那就是您需要开始使用更高级的形式的东西.在你的情况下会是什么样子.

@Component({选择器:'东西'，模板:`<form #myForm="ngForm"><input [(ngModel)]="field.Value" [formContol]="myFieldControl" type="text" [value]="field.Value"></表单>`})导出类 MyComponent{公共字段:any = {值:'你好'，isRequired:false};public myFieldControl: FormControl = new FormControl('', [this.dynamicRequiredValidator.bind(this)]);public dynamicRequiredValidator(control: FormControl):{[key: string]: boolean}{if(field.IsRequired && !control.value){返回{必需:真}；}返回 {};}}

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

还有另一种方法可以使用显示的指令执行此操作 此处.

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>

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

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

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

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

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

What also doesn't work:

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

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

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

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

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