Я пытаюсь создать динамическую проверку для форм. Поскольку формы не статичны и создаются динамически, имена, которые я даю для formControlName
, происходят от ngFor
. Кажется, все работает правильно, и единственная проблема, с которой я сталкиваюсь, - это отображение сообщения об ошибке. Поскольку имена идут с {{e.Title}}
, когда я пытаюсь сделать editForm.controls.{{e.Title}}.errors?.required
, мне не нравится там {{e.Title}}. Есть ли способ исправить это?
<mat-error *ngIf = "editForm.controls.{{e.Title}}.errors?.required"></mat-error>
Пример того, что я пытаюсь сделать:
<mat-error *ngIf = "editForm.controls.test?.errors?.toggle && !editable"></mat-error>
HTML
<form [formGroup] = "editForm" (ngSubmit) = "submitForm()" fxFill fxLayout = "column" fxLayoutGap = "5px">
<ng-container *ngFor = "let e of template; let i = index" [ngSwitch] = "e.Type">
<ng-template [ngSwitchCase] = "0">
<mat-form-field class = "item-container" appearance = "outline" floatLabel = "always" fxFill>
<mat-label class = "title title-input-property">Employee Name</mat-label>
<input #fn formControlName = "{{e.Title}}" matInput placeholder = "Please enter your name" required>
<mat-error *ngIf = "editForm.controls.{{e.Title}}.errors?.required"></mat-error>
</mat-form-field>
</ng-template>
<ng-template [ngSwitchCase] = "1">
<mat-form-field class = "item-container" appearance = "outline" floatLabel = "always" fxFill>
<mat-label class = "title title-input-property">Employee Number</mat-label>
<input #fn formControlName = "{{e.Title}}" matInput placeholder = "Please enter your employee number" required>
<mat-error *ngIf = "editForm.controls.{{e.Title}}.errors?.required"></mat-error>
</mat-form-field>
</ng-template>
</ng-container>
</form>
ТС
ngOnInit(): void {
this.editForm = this.formBuilder.group(this.ValidatorsTwo(this.elements);
}
public ValidatorsTwo(elements: any[]) : any {
const validateItems = [];
elements.forEach((e, i) => {
let a;
switch (e.Type) {
case 0: {
if (e.Required) {
a = { e.Title: ['', [this.requireValidator()]] };
} else {
a = { e.Title: [''] };
}
validateItems.push(a);
break;
}
// etc
default: {
break;
}
}
});
const validationArray = Object.assign({}, ...validateItems);
return validationArray;
}
Вы используете тот же синтаксис, что и в компоненте:
<mat-error *ngIf = "editForm.controls[e.Title].errors?.required"></mat-error>
или
<mat-error *ngIf = "editForm.get(e.Title).hasError('required')"></mat-error>
Также я лично предпочитаю [formControlName] = "e.Title"
formControlName = "{{e.Title}}"
, но это на ваше усмотрение.
используйте
editForm.get('e.Title').errors?.required
. Кстати, используйте напрямуюreturn validateItems
. Я не совсем уверен, что использование Object.assign может работать