在 Angular 中的 HTML 中动态包含数组对象变量

Question

我是Angular6的新手。这是我的问题。

在组件中：

 ngOnInit() {

                this.cols = [
                    { field: 'col1', header: 'Column 1', filterMatchMode: 'contains' },
                    { field: 'col2', header: 'Column 2', filterMatchMode: 'contains' },
                     ...
                ];
this.selectedColumns = this.cols;

    }

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

当我尝试在 ngIf 和 Angular id 中检查并插入动态值 "col.field" 时，我遇到了问题。

1. *ngIf="col.field.invalid && col.field.touched"
2. name="{{col.field}}" #{{col.field}}="ngModel"

我正在尝试为带有错误消息的输入字段提供验证。

Answer 1

您滥用了 prime ng p-table 组件，您正在尝试使用列 headers 作为输入表单。如果您想使用 table 输入新数据，只需创建一个单行的 <p-table> 并使用 primeng 的内置功能（如 OnEditComplete() 事件）会容易得多触发您的验证。我还会问自己是否真的需要动态列？您需要使用 table 吗？你能做一个表单并将验证构建到 prime ng 中吗？

https://www.primefaces.org/primeng/#/table/edit

https://www.primefaces.org/primeng/#/validation

Answer 2

您可以创建一个带有静态名称的模板变量，例如 #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 将始终引用当前项目的输入。 *ngFor 结构指令为每个项目创建一个模板，每个项目都有自己的范围。这应该是动态创建模板变量名称最简单的解决方案。

https://stackblitz.com/edit/angular-mefkxp?file=src%2Fapp%2Fapp.component.html

在 Angular 中的 HTML 中动态包含数组对象变量

Dynamically include array object variables in the HTML in Angular

html-validation

primeng

angular

angular-reactive-forms

angular6