Angular 7 - Как показывать сообщения об ошибках в дочерних компонентах формы при отправке формы

Question

Я реализую страницу регистрации с Angular 7 и Angular Material. На этой странице я использую компонент ввода пароля, который получает ссылку на используемую FormGroup. Внешний компонент обрабатывает логические части (например, как выглядит FormGroup, как определяются FormControls и как проверяется каждый вход). Когда я нажимаю на ввод пароля и щелкаю где-то еще / вводю что-то недопустимое, сообщение об ошибке ввода отображается правильно. Но когда я нажимаю кнопку подтверждения, не касаясь каких-либо полей ввода, FormControl из FormGroup проверяется (FormControl даже говорит, что в нем есть ошибка), но не затрагивается, поэтому сообщения об ошибках не отображаются.

Я уже посмотрел, как решить это поведение. Некоторые предлагали вручную установить все элементы управления формой, как к ним прикасались после нажатия кнопки "Отправить". Да, это работает, но я хотел бы иметь общее решение, поэтому мне не нужно делать это для каждой формы, которую я буду иметь в будущем.

signup.component.ts:

export class SignupComponent implements OnInit {

    signupForm: FormGroup;

    constructor() { }

    ngOnInit() {
        this.signupForm = new FormGroup({
            'password': new FormControl('', [Validators.required]),
            'contact': new FormControl('', [Validators.required])
        });
    }

    onSubmit() {
        console.log('Form validity: ' + this.signupForm.valid);
    }

}

signup.component.html:

<mat-card class="signup-card">
    <h1 class="signup-title">Sign up</h1>

    <form [formGroup]="signupForm" #form="ngForm" (ngSubmit)="onSubmit()" fxLayout="column">
        <!-- Password -->
        <app-base-password-input [parentForm]="signupForm"></app-base-password-input>

        <!-- Contact -->
        <div class="signup-contact">
            <mat-checkbox formControlName="contact" required>We may contact you.</mat-checkbox>
            <mat-error *ngIf="form.submitted && signupForm.controls['contact'].hasError('required')">Please check this box.</mat-error>
        </div>

    <button class="signup-button" mat-raised-button color="primary" type="submit">Sign up</button>

    </form>
</mat-card>

приложение-база-пароль-input.component.ts:

export class BasePasswordInputComponent {

    @Input() parentForm: FormGroup;

    constructor() { }

}

приложение-база-пароль input.component.html:

<mat-form-field [formGroup]="parentForm">
    <mat-label>Password</mat-label>
    <input matInput type="password" formControlName="password" required>
    <mat-error *ngIf="parentForm.controls['password'].hasError('required')">Password is required.</mat-error>
</mat-form-field>

Что я ожидаю:
Когда я нажимаю кнопку подтверждения, не касаясь / не щелкая никакие поля ввода, при каждом вводе отображается сообщение об ошибке (например, пользователь! Мне нужно!).

Что на самом деле происходит:
Когда я нажимаю кнопку подтверждения, не касаясь / не щелкая никакие поля ввода, только сообщения FormControl, определенные во внешнем компоненте, отображают сообщения об ошибках (в этом случае: флажок контакта). Мои компоненты ввода не показывают сообщений об ошибках (в этом случае: компонент пароля).

Я надеюсь, что я разместил все, что вам нужно, чтобы ответить на мой вопрос. Если что-то пока неясно, я обновлю пост:)

Answer 1

Единственный способ, как я знаю, это, как вы говорите, установить каждый FormControl как "затронутый" вручную в onSubmit() метод.

SignupComponent.ts

onSubmit(){
    console.log('Form validity: ' + this.signupForm.valid);
    touchAllElements(this.signupForm);
}

touchAllElements(formGroup:FormGroup){
    Object.keys(formGroup["controls"]).forEach(element => {
        formGroup.get(element).markAsTouched();
    });
}

Чтобы избежать повторения этого метода в каждом компоненте формы, вы можете переместить touchAllElements на службу