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

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

0 голосов
/ 29 января 2019

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

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

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>

app-base-password-input.component.ts: 

export class BasePasswordInputComponent {

    @Input() parentForm: FormGroup;

    constructor() { }

}

app-base-password-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, определенные во внешнем компоненте, отображают сообщения об ошибках (в этом случае: флажок контакта).Мои компоненты ввода не показывают сообщений об ошибках (в данном случае: компонент пароля).

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

1 Ответ

0 голосов
/ 05 февраля 2019

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

RegistrationComponent.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 в службу

...