Angular2 показать все ошибки проверки группы форм

Я создаю вложенную форму с Angular2 и FormGroup, в настоящее время у меня есть форма, такая как в родительском контроллере:

this.orderForm = this.fb.group({

customerSelectForm: this.fb.group({ // create nested formgroup to pass to child
        selectTypeahead: ['', 
                            Validators.required],
        })
})

Тогда в дочернем компоненте у меня есть:

<div class="form-group" [formGroup]="customerSelectForm" *ngIf="customerSelectForm">
        <label for="oh-custaccount">Customer Account #</label>

    <input class="form-control" type="text" 
    formControlName="selectTypeahead"
    (focusout)=someFunction() />

    <p *ngIf="customerSelectForm.controls.selectTypeahead.errors?.required">
    Number required!</p>
</div>

Теперь этот дочерний шаблон работает нормально и выдает ошибку на экране, если внутри текстового поля нет ввода. Затем я снова в родительском контроллере есть кнопка отправки:

<button type="submit" class=" btn btn-success" [disabled]="orderForm?.invalid">Submit</button>

Опять же, это работает как положено, и включается только после того, как вход зарегистрирован во входе selectTypeahead.

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

{{orderForm.errors}}

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

7 голосов | спросил crooksey 23 Maypm17 2017, 16:28:19

1 ответ


0

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

 getAllErrors(form: FormGroup | FormArray): { [key: string]: any; } | null {
    let hasError = false;
    const result = Object.keys(form.controls).reduce((acc, key) => {
        const control = form.get(key);
        const errors = (control instanceof FormGroup || control instanceof FormArray)
            ? this.getAllErrors(control)
            : control.errors;
        if (errors) {
            acc[key] = errors;
            hasError = true;
        }
        return acc;
    }, {} as { [key: string]: any; });
    return hasError ? result : null;
}

Тогда в вашем шаблоне

 <!--
  NOTE: This is just for displaying the result of the method
  You should replace the `<pre><code>` with whatever your snippet is like
-->
<pre><code>{{ getAllErrors(orderForm) | json }}</code></pre>
ответил kimamula 6 12017vEurope/Moscow11bEurope/MoscowMon, 06 Nov 2017 12:32:29 +0300 2017, 12:32:29

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132