Угловой материал Вертикальный шаговый одиночный форма .reset () не работает должным образом

Question

Я работал над элементом stepper для одной из моих веб-страниц и пытался реализовать функциональность .reset(), чтобы вернуть форму в пустое состояние с использованием документации по дизайну материала (https://material.angular.io/components/stepper/overview)

Следуя примеру группы из нескольких форм, я вижу, что .reset работает правильно, возвращая вас к первому шагу и очищая форму, однако, при попытке использовать структуру с одной формой, я обнаружил, что stepper.reset()возвращает вас к первому шагу, но не очищает форму.

Я пытался пометить кнопку сброса как Type="button", поскольку для отдельных форм это требуется на кнопках «Далее» и «Назад», чтобы предотвратить отправку формы на кнопку.щелкните, но не увидели никаких изменений.

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

Любая помощь с этим будет высоко ценится. Спасибо!

create.component.html

<form [formGroup]="formGroup" class="content-container" (ngSubmit)="onSubmit()">
  <h1>{{title}}</h1>
  <mat-vertical-stepper #stepper>
    <mat-step formGroupName="someFieldGroup" [stepControl]="someFieldGroup">
      <ng-template matStepLabel>Fill out Field</ng-template>
      <mat-form-field>
        <input matInput placeholder="Some Field" formControlName="someFieldCtrl" name="someFieldName" required>
        <mat-error>This field is required</mat-error>
      </mat-form-field>
      <div>
        <button type="button" mat-button matStepperNext>Next</button>
      </div>
    </mat-step>
    <mat-step formGroupName="anotherFieldGroup" [stepControl]="anotherFieldGroup">
      <ng-template matStepLabel>Fill out Field</ng-template>
      <mat-form-field>
        <input matInput placeholder="Another Field" formControlName="anotherFieldCtrl" name="anotherFieldName" required>
        <mat-error>This field is required</mat-error>
      </mat-form-field>
      <div>
        <button type="button" mat-button matStepperPrevious>Back</button>
        <button type="button" mat-button matStepperNext>Next</button>
      </div> 
    </mat-step>
    <mat-step formGroupName="dropdownFieldGroup" [stepControl]="dropdownFieldGroup">
      <ng-template matStepLabel>Select Option</ng-template>
      <mat-form-field>
        <mat-select placeholder="Select Option" disableOptionCentering formControlName="dropdownFieldCtrl" name="dropdownFieldName" required>
          <mat-option value="1">One</mat-option>
          <mat-option value="2">Two</mat-option>
          <mat-option value="3">Three</mat-option>
          <mat-option value="4">Four</mat-option>
        </mat-select>
        <mat-error>This field is required</mat-error>
      </mat-form-field>
      <div>
        <button type="button" mat-button matStepperPrevious>Back</button>
        <button type="button" mat-button matStepperNext>Next</button>
      </div>
    </mat-step>
    <mat-step>
      <ng-template matStepLabel>Done</ng-template>
      You are now done.
      <div>
        <button type="button" mat-button matStepperPrevious>Back</button>
        <button type="submit" mat-button>Done</button>
        <button mat-button (click)="stepper.reset()">Reset</button>
      </div>
    </mat-step>
  </mat-vertical-stepper>
</form>

create.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

//Type Imports
import { Service } from '../service';
import { Post } from './post';

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit {

  title = 'Create';

  formGroup: FormGroup;
  post: Post = {} as Post;

  constructor(private service: Service) { }

  ngOnInit() {
    this.formGroup = new FormGroup({
      someFieldGroup: new FormGroup({
        someFieldCtrl: new FormControl(null)
      }),
      anotherFieldGroup: new FormGroup({
        anotherFieldName: new FormControl(null)
      }),
      dropdownFieldGroup: new FormGroup({
        dropdownFieldCtrl: new FormControl(null)
      })
    });
  }

  onSubmit() {
    this.post.someField = this.formGroup.get('someFieldGroup').get('someFieldName').value;
    this.post.anotherField = this.formGroup.get('anotherFieldGroup').get('anotherFieldName').value;
    this.post.dropdownField = this.formGroup.get('dropdownFieldGroup').get('dropdownFieldName').value;

    this.service.create(JSON.stringify(this.post)).subscribe(data => { console.log(data) });
  }
}

Answer 1

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

Пример:

<form [formGroup]="formGroup" class="content-container" (ngSubmit)="onSubmit() 
#myFormGroup">
...
  <button mat-button (click)="myFormGroup.reset();stepper.reset()">Reset</button>
      </div>
    </mat-step>
  </mat-vertical-stepper>
</form>