Angular Реактивная форма частичного представления формы - PullRequest
Новая
       1

Angular Реактивная форма частичного представления формы

0 голосов
/ 20 апреля 2020

У меня есть длинная форма в приложении Angular 4. Его разделено на 4 раздела. Каждый раздел позволяет пользователю сохранить свой прогресс и вернуться к финалу sh позже. Это означает, что при сохранении прогресса таким способом поле не требуется. В конце формы есть кнопка «Отправить заявку». При использовании этой кнопки все поля обязательны для заполнения. У меня есть 4 отдельных компонента, по одному для каждого раздела, и я планировал представить каждый раздел отдельно, но это новое требование меняет мой план.

У меня есть такой основной компонент: 

<div class="animated fadeIn">
    <app-form-1></app-form-1>
    <app-form-2></app-form-2>
    <app-form-3></app-form-3>
    <app-form-4></app-form-4>
</div>

, и каждый из дочерних компонентов выглядит следующим образом: 

<form name="form" [formGroup]="form" (ngSubmit)="save()" novalidate>
    <div class="form-group row">
        <label for="field1" class="form-control-label col-md-4 text-md-right">
            Field 1:
        </label>
        <div class="col-md-8">
            <input type="text" formControlName="field1" class="form-control" placeholder="Field 1"
                [class.is-invalid]="isFieldInvalid('field1')">
        </div>
    </div>
</form>

Таким образом, чтобы можно было отправить части вместе, я думаю, мне нужно было бы переместить форму вверх к основному компоненту, и объявить каждый раздел как formGroup этой основной группы. Таким образом, я могу проверить все, когда нажимаю «Отправить заявку». Но теперь я должен иметь возможность сохранять прогресс для каждого дочернего компонента. Я мог бы притвориться, что отправляю с помощью обычной кнопки, которая берет текущие значения и отправляет их на сервер, но это не вызовет другие валидаторы, такие как Validators.email и Validators.pattern.

Есть ли способ, которым я мог бы есть частичные представления формы, которые используют всю полноту проверки реактивной формы, но позволяют мне также отправлять из родительского компонента?

...