[英]Dynamically include array object variables in the HTML in Angular
I am new to the Angular 6. Here is my problem. 我是Angular 6的新手。这是我的问题。
In the Component: 在组件中:
ngOnInit() {
this.cols = [
{ field: 'col1', header: 'Column 1', filterMatchMode: 'contains' },
{ field: 'col2', header: 'Column 2', filterMatchMode: 'contains' },
...
];
this.selectedColumns = this.cols;
}
In the HTML: 在HTML中:
<p-table [columns]="selectedColumns" >
<th *ngFor="let col of columns;">
<div [ngClass]="{'has-error': col.field.invalid && col.field.touched }">
<input [(ngModel)]="newRecord[col.field]" name="{{col.field}}" #{{col.field}}="ngModel" required type="text" pInputText [style]="{'width':'100%'}" class="form-control form-control-sm search-input" pattern="[0-9]+" />
</div>
<div *ngIf="col.field.invalid && col.field.touched" class="td-error-msg">
Valid input is required.
</div>
</th>
</p-table>
I am getting issue where when I try to check and insert the dynamic value "col.field" in the ngIf and Angular id. 我在尝试检查动态值“ col.field”并将其插入ngIf和Angular ID时遇到问题。
1. *ngIf="col.field.invalid && col.field.touched"
2. name="{{col.field}}" #{{col.field}}="ngModel"
I am trying to provide validation for the input field with error message. 我正在尝试通过错误消息为输入字段提供验证。
You are misusing prime ng p-table component, you are trying to use column headers as a input form. 您正在滥用主要的p表组件,试图将列标题用作输入形式。 If you want to use the table to input new data it would be much easier to just create a
<p-table>
with a single row and use the built in features of primeng like the OnEditComplete()
event to trigger your validation. 如果要使用该表输入新数据,则只需创建一个具有单个行的
<p-table>
并使用诸如OnEditComplete()
的内置功能(例如OnEditComplete()
事件)来触发验证就OnEditComplete()
。 I would also ask yourself if you really need dynamic columns? 我还会问自己,您是否真的需要动态列? Do you need to use a table?
您需要使用桌子吗? Could you just make a form and use the validation build into prime ng?
您能制作一张表格,然后使用验证版本进行初始化吗?
https://www.primefaces.org/primeng/#/table/edit https://www.primefaces.org/primeng/#/table/edit
https://www.primefaces.org/primeng/#/validation https://www.primefaces.org/primeng/#/validation
You can create a template variable with a static name, such as #field
(or whatever name you like), and since it is scoped to the item, there will be no naming conflicts. 您可以创建一个具有静态名称的模板变量,例如
#field
(或您喜欢的任何名称),并且由于它的作用域是该项,因此不会有命名冲突。
<input [(ngModel)]="newRecord[col.field]" name="{{col.field}}" #field="ngModel"... /> ... <div *ngIf="field.invalid && field.touched" class="td-error-msg"> Valid input is required. </div>
field
will always refer to the input of the current item. field
将始终引用当前项目的输入。 The *ngFor
structural directive creates a template for each item, each with its own scope. *ngFor
结构化指令为每个项目创建一个模板,每个模板都有自己的范围。 This should be the easiest solution over dynamically creating template variable names. 这应该是动态创建模板变量名称的最简单解决方案。
https://stackblitz.com/edit/angular-mefkxp?file=src%2Fapp%2Fapp.component.html https://stackblitz.com/edit/angular-mefkxp?file=src%2Fapp%2Fapp.component.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.