角度反应式: hasError函数返回true但不显示错误

Question

我有一个奇怪的问题与角度反应形式，特别是与"hasError“函数。我检查我的输入是否包含mac地址。函数hasError向我发送true，但没有显示错误。

我从API获取数据。数据是由邮递员软件发送的，而不是我的表单，所以这不是一种正常的方式。但问题就在这里，我想要理解它。

下面是我的代码：

component.ts

             // form init
const macAddressPattern =  "^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$";
const ipPattern =  "^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$";

            this.deviceForm = fb.group({
                'name': fb.control('', [Validators.required]),
                'model': fb.control('', [Validators.required]),
                'brand': fb.control('', [Validators.required]),
                'mac_address': fb.control('', Validators.compose([Validators.required, Validators.pattern(macAddressPattern)])),
                'ip': fb.control('', Validators.compose([Validators.required, Validators.pattern(ipPattern)])),
            });

component.html

<mat-form-field class="form-input">
                                    <input matInput formControlName="mac_address" required
                                    placeholder="mac address">
                                    <mat-error *ngIf="deviceForm.controls['mac_address'].hasError('pattern')">
                                            bad mac address // not displayed
                                    </mat-error>
                                    <!--<mat-error *ngIf="deviceForm.controls['mac_address'].hasError('required')">
                                        The field is required
                                    </mat-error>-->


                                </mat-form-field>

                                <pre> has error : {{deviceForm.controls.mac_address.hasError('pattern')}} </pre> // has error : true

有什么想法吗？谢谢！

Answer 1

1. 您可以将您的语法简化为：

‘'mac_address'：''，Validators.required，Validators.pattern(macAddressPattern)，

• 您应该使用其他语法来处理此错误

*ngIf="deviceForm.get('mac_address').hasError('pattern')"

这个语法适用于我。如果没有，就做一个沙箱，这样我们就可以看到问题并解决它。

Answer 2

我不知道这是不是最好的方法，但它是有效的:我模拟用户触摸表单的每个字段以显示错误。

    initFormValues() {
        this.deviceForm.patchValue(myObj);

        // edit mode 
        if (this.deviceForm.invalid && this.updateForm) {
            this.markFormGroupTouched(this.deviceForm);
        }
    }


    public markFormGroupTouched(formGroup: FormGroup) {
        Object.values(formGroup.controls).forEach(control => {
          control.markAsTouched();
        });
    }

或用于es2016

    public markFormGroupTouched(formGroup: FormGroup) {
        for(let i in formGroup.controls) {
            formGroup.controls[i].markAsTouched();
        }
    }