Блог

У меня есть форма, динамически заполняемая при вводе (с использованием данных базы данных).

Я добавляю проверку шаблона (используя некоторые регулярные выражения). Если шаблон не подходит, mat-error отображается a. Это работает, если я фокусируюсь, а затем фокусируюсь на вводе.

Но ошибка mat не отображается автоматически, если я использую setValue() функцию из FormControl.

Вот определение ошибки mat :

 <input [id]="field.id" matInput type="text" [formControl]="field.control" [pattern]="field.pattern">
<mat-error class="mt-1" *ngIf="field.control.errors">
    {{ getErrorMessage(field.id, category['id']) }}
</mat-error>
 

и то, как я автоматически устанавливаю значение

 async fillForm(data: any): Promise<any> {
    this.fields = data.fields;
    for (let category in this.fields) {
        for (let cpt in this.fields[category]) {
            let field = this.fields[category][cpt];
            this.form[category].push({
                id: field.id,
                label: field.label,
                required: field.required,
                control: new FormControl(),
                type: field.type,
                pattern: this.getPattern(field.format),
                color: field.color,
                unit: field.unit,
                class: field.class,
                format: field.format,
                display: field.display,
                format_icon: field.format_icon,
                display_icon: field.display_icon,
                class_label: field.class_label,
                cpt: 0,
            });

            let value = this.invoice.datas[field.id];
            let _field = this.form[category][this.form[category].length - 1];
            _field.control.setValue(value);
        }
    }
}
 

Спасибо за вашу помощь

Давайте попробуем этот подход:

 <input [id]="field.id" matInput type="text" [formControl]="field.control">
<mat-error class="mt-1" *ngIf="field.control.errors">
    {{ getErrorMessage(field.id, category['id']) }}
</mat-error>
 

 async fillForm(data: any): Promise<any> {
    this.fields = data.fields;
    for (let category in this.fields) {
        for (let cpt in this.fields[category]) {
            let field = this.fields[category][cpt];
            let value = this.invoice.datas[field.id];
            this.form[category].push({
                id: field.id,
                label: field.label,
                required: field.required,
                control: new FormControl(value, [Validators.pattern(this.getPattern(field.format))]),
                type: field.type,
                pattern: this.getPattern(field.format),
                color: field.color,
                unit: field.unit,
                class: field.class,
                format: field.format,
                display: field.display,
                format_icon: field.format_icon,
                display_icon: field.display_icon,
                class_label: field.class_label,
                cpt: 0,
            });
        }
    }
}