Угловой 6 Материал Шаговый коврик-вкладыш реактивных форм - PullRequest
Новая
       25

Угловой 6 Материал Шаговый коврик-вкладыш реактивных форм

0 голосов
/ 28 декабря 2018

Здравствуйте, у меня проблема с динамическим степпером, когда я пытаюсь сгенерировать шаги с формой для каждого шага.Формы происходят из вложенного объекта FormGroup.Сценарий продолжается:

Форма: 

this.formGroupNested = _formBuilder.group({
      formGroup1: _formBuilder.group({
        name: new FormControl(),
        displayName: new FormControl(),
        email: new FormControl(),
        adult: new FormControl(),
        selectField: new FormControl()
      }),
      formGroup2: _formBuilder.group({
        firstName: new FormControl(),
        lastName: new FormControl()
      })
    });

stepper.html 

  <mat-horizontal-stepper [linear]="isLinear" #stepperDelivery>
    <mat-step *ngFor="let step of steps" [stepControl]="step">
        <ng-template matStepLabel>Fill out your name</ng-template>
        <!-- <form [formGroup]="step">

        </form> -->
    </mat-step>
  </mat-horizontal-stepper>

Я работал с HTML, но структура не подходит к степперу.Вот рабочий пример, в [...] имеются элементы управления 

<form
  *ngIf="messages; else loading"  
  [formGroup]="formGroupNested"
  [connectForm]="forms">
    <div
      formGroupName="formGroup1">
      <h1>{{ messages.authentication.form.steps.one.title }}</h1>
      <uland-text-field
      [formGroup]="formGroupNested.controls.formGroup1"
      [controlName]="'name'"
      [id]="'name'"
      [label]="messages.authentication.name.label"
      [placeholder]="messages.authentication.name.placeholder"
      [isReadOnly]="false"
      ></uland-text-field>
      [...]
    </div>
    <div 
      formGroupName="formGroup2">
      <h1>{{ messages.authentication.form.steps.two.title }}</h1>
      [...]
    </div>
</form>

Есть ли у вас какие-либо идеи, как достичь этой цели?Я думал о ng-template с псевдонимом шаблона для шагов генерации.С уважением!

РЕДАКТИРОВАТЬ: без вложенных форм мой степпер выглядит следующим образом, и я думаю, что его проще в обслуживании: 

  <mat-horizontal-stepper [linear]="isLinear" #stepperDelivery>
    <mat-step [stepControl]="formGroup">
        <ng-template matStepLabel>Fill out your name</ng-template>
        <cms-development-form
        [messages]="messages"
        [formGroup]="formGroupSingle">
        </cms-development-form>
    </mat-step>
  </mat-horizontal-stepper>
...