angular - Angular - 如何自动触发 mat-error

Question

我有一个表单，动态填写 init（使用数据库数据）。

我添加了一个模式检查（使用一些正则表达式）。如果图案不好，mat-error则显示 a。如果我专注于然后专注于输入，它就会起作用。

setValue()但是如果我使用FormControl 中的函数，mat-error 不会自动显示。

这是 mat-error 定义：

<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);
        }
    }
}

谢谢你的帮助

标签： angularform-control

Answer 1

让我们试试这个方法：

<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,
            });
        }
    }
}