Angular - динамически включать переменные объекта массива в HTML - PullRequest
Новая
       25

Angular - динамически включать переменные объекта массива в HTML

0 голосов
/ 04 сентября 2018

Я новичок в Angular 6. Вот моя проблема.

В компоненте: 

 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>

У меня возникает проблема, когда я пытаюсь проверить и вставить динамическое значение «col.field» в ngIf и угловой идентификатор. 

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

На самом деле я пытаюсь предоставить проверку для поля ввода с сообщением об ошибке.

Любая помощь будет оценена.

Ответы [ 2 ]

0 голосов
/ 05 сентября 2018

Вы можете создать переменную шаблона со статическим именем, таким как #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

0 голосов
/ 05 сентября 2018

Вы неправильно используете компонент простой таблицы p, вы пытаетесь использовать заголовки столбцов в качестве формы ввода. Если вы хотите использовать таблицу для ввода новых данных, было бы гораздо проще просто создать <p-table> с одной строкой и использовать встроенные функции primeng, такие как событие OnEditComplete(), для запуска проверки. Я бы также спросил себя, действительно ли вам нужны динамические столбцы? Вам нужно использовать стол? Не могли бы вы просто сделать форму и использовать проверочную сборку в prime ng?

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

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

...