关键词：
【中文标题】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>
【讨论】：
Angular Material 找不到 Angular Material 核心主题
】AngularMaterial找不到AngularMaterial核心主题【英文标题】：AngularmaterialCouldnotfindAngularMaterialcoretheme【发布时间】：2017-10-2901:49:13【问题描述】：在我的Angular2项目中，我从https://material.angular.io/guide/getting-started安装了最新的材料插件... 查看详情
AngularCLI 和 Angular Material（原理图）错误：无法解析集合“@angular/material”
】AngularCLI和AngularMaterial（原理图）错误：无法解析集合“@angular/material”【英文标题】：AngularCLIandAngularMaterial(schematics)error:Collection"@angular/material"cannotberesolved【发布时间】：2018-12-0221:02:48【问题描述】：我正在尝试使用t... 查看详情
无法导入“@angular/material”模块
】无法导入“@angular/material”模块【英文标题】：Notabletoimport"@angular/material"module【发布时间】：2020-05-2506:34:40【问题描述】：我对堆栈完全陌生，我在使用Angular的材料模块时遇到了一些问题。我正在尝试在我的代码中导... 查看详情
Angular2 Material：Angular 材质输入的自定义验证
】Angular2Material：Angular材质输入的自定义验证【英文标题】：Angular2Material:CustomValidationforAngularMaterialInput【发布时间】：2018-03-2315:21:31【问题描述】：在我的Angular2和材料应用程序中，我想检查用户名是否已经被占用。如果它已经... 查看详情
Angular 2 Material - 如何居中进度微调器
】Angular2Material-如何居中进度微调器【英文标题】：Angular2Material-HowToCenterProgressSpinner【发布时间】：2017-05-1406:34:32【问题描述】：我已经从下面的链接实现了Angular2进度微调器https://github.com/angular/material2/tree/master/src/lib/progress-spin... 查看详情
Angular Material - 不关闭 Material 小吃吧
】AngularMaterial-不关闭Material小吃吧【英文标题】：AngularMaterial-NotclosingMaterialsnackbar【发布时间】：2018-09-1223:27:40【问题描述】：我正在使用Angular和AngularMaterial版本5。有没有办法让小吃店保持打开状态？例如，如果发生错误，请... 查看详情
带有 Angular Material 声明的 Angular 编译警告
】带有AngularMaterial声明的Angular编译警告【英文标题】：AngularCompilationWarningswithAngularMaterialDeclarations【发布时间】：2019-10-1809:45:44【问题描述】：我在安装AngularMaterial后尝试编译时遇到了一堆警告（无论是直接来自npm还是通过ngadd... 查看详情
如何有效地使用 Angular Material 自定义调色板颜色 Angular Material
】如何有效地使用AngularMaterial自定义调色板颜色AngularMaterial【英文标题】：HowtouseAngularMaterialcustom-palettecolorseffectivelyAngularMaterial【发布时间】：2019-04-0423:20:01【问题描述】：我正在使用自定义材质调色板。使用其默认阴影、深色... 查看详情
@angular/material/index.d.ts' 不是模块
】@angular/material/index.d.ts\\\'不是模块【英文标题】：@angular/material/index.d.ts\'isnotamodule@angular/material/index.d.ts\'不是模块【发布时间】：2020-02-2322:03:14【问题描述】：使用Angular8，在构建应用程序时，我们遇到以下错误：app/modules/admin... 查看详情
Angular Material Schematics 生成的代码
】AngularMaterialSchematics生成的代码【英文标题】：AngularMaterialSchematicsgeneratedcode【发布时间】：2018-10-2309:54:27【问题描述】：我是Angular的新手，找不到任何东西来解释从nggenerate@angular/material:material-nav生成的这些代码行的确切含义... 查看详情
@angular/material 自动完成的性能问题
】@angular/material自动完成的性能问题【英文标题】：Performanceissuewith@angular/materialautocomplete【发布时间】：2019-10-1416:10:05【问题描述】：我正在使用Angular/Material自动完成功能。在将数据加载到自动完成时遇到严重的性能问题，例... 查看详情
找不到模块'@angular/material-moment-adapter'
】找不到模块\\\'@angular/material-moment-adapter\\\'【英文标题】：Cannotfindmodule\'@angular/material-moment-adapter\'找不到模块\'@angular/material-moment-adapter\'【发布时间】：2018-05-2817:13:55【问题描述】：为什么这不起作用？我尝试导入MomentDateAdapte... 查看详情
波纹效果未显示在角度应用程序的按钮中 - Angular-Material
】波纹效果未显示在角度应用程序的按钮中-Angular-Material【英文标题】：Rippleeffectisnotdisplayinginbuttoninangularapp-Angular-Material【发布时间】：2019-05-1117:32:35【问题描述】：https://material.angular.io/components/button/overview我正在使用这个angula... 查看详情
Angular 2 Material无法加载样式
】Angular2Material无法加载样式【英文标题】：Angular2Materialcan\'tloadstyle【发布时间】：2017-10-0411:06:26【问题描述】：我开始在Angular中使用AngularMaterial库为界面开发一个Web应用程序。但是在尝试导入预建主题时出现错误。为了导入它... 查看详情
Angular Material/Jasmine 测试 - 加载 Material Harnesses 时出错
】AngularMaterial/Jasmine测试-加载MaterialHarnesses时出错【英文标题】：AngularMaterial/Jasminetesting-errorswhileloadingMaterialHarnesses【发布时间】：2020-11-2321:37:52【问题描述】：我正在尝试测试使用AngularMaterial构建的组件，但是在使用HarnessLoader... 查看详情
angular-material2 工具栏阴影
】angular-material2工具栏阴影【英文标题】：angular-material2toolbarshadow【发布时间】：2017-07-1322:07:27【问题描述】：我是material2的新手我试图将主应用程序工具栏固定在屏幕顶部，问题是海拔无法正常工作（内容隐藏了工具栏的阴影... 查看详情