使用Angular 2 Forms动态标记字段的正确方法是什么？(what is the proper way to dynamically mark a field as required usin

系统教程行业动态更新时间:2024-06-14 17:02:17

使用Angular 2 Forms动态标记字段的正确方法是什么？(what is the proper way to dynamically mark a field as required using Angular 2 Forms?)

使用Angular 2（2.0.0），使用Angular Forms 动态标记字段的建议方法是什么？

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

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

如果我使用类似的东西：

在页面上呈现（注意=“true” ）：

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

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

什么也行不通：

以为我可能有一个函数可以根据字段返回我的字符串“required”，这只会产生模板错误。

有没有办法完成这个并且只required渲染我的属性？或者一种让Angular在值为true / false时识别此属性的方法？

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

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:

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

If I use something like:

That renders on the page like (note the ="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:

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:

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!

最满意答案

基本表单的东西非常适合简单的表单，但是当你需要更多的控件时，就像你需要开始使用更高级的表单一样。在你的情况下看起来会是这样的。

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

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

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.