Кутова реактивна форма: функція hasError повертає true, але помилка не відображається - кутова, кутова реактивна форма

Я "дивна проблема з кутовою реактивної формою спеціально з функцією" hasError ".Я перевіряю, чи мій вхід містить адресу MAC.

Я отримую дані з 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

Будь-яка ідея? Дякую !

Відповіді:

1. Ви можете спростити свій синтаксис таким чином:

   "mac_address": "", [Validators.required, Validators.pattern(macAddressPattern)],
   

2. Ви повинні використовувати інший синтаксис для помилки

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

Цей синтаксис працює для мене. Якщо це не так, зробіть пісочницю, щоб ми могли бачити проблему і грати з нею.

Я не знаю, якщо це найкращий спосіб, але він працює: я моделюю користувача торкнувся кожного поля моєї форми для відображення помилки.

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