Angular Material Vertical Stepper 单一形式 .reset() 无法正常工作

Posted 2023-05-07

【中文标题】Angular Material Vertical Stepper 单一形式 .reset() 无法正常工作

【英文标题】：Angular Material Vertical Stepper single form .reset() not functioning correctly

【发布时间】：2019-05-15 18:58:17

【问题描述】：

我一直在为我的一个网页制作步进元素，并尝试实现.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) );
  

【参考方案1】：

我也遇到了这个问题。在步进器上调用重置似乎只会让您回到第一步。如果您还对表单本身调用重置，则表单字段应该清除。

例子：

<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>