我一直在为我的一个网页开发一个stepper元素,并尝试实现.reset()
功能,以便使用材料设计文档将{{3}转换为空白状态({{3} })
以多窗体组示例为例,通过将您放回到第一步并清除窗体,我可以看到.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) });
}
}
答案 0 :(得分:2)
我正面临这一问题为好。在步进器上调用reset似乎只会使您回到第一步。如果您还对表单本身调用reset,则应清除表单字段。
示例:
Foo