无表格 - 跳过验证上取消
问题描述:
我有拥有取消和提交按钮的反应形式:无表格 - 跳过验证上取消
<button (click)="cancel($event)" type="button" class="ui button">Cancel</button>
<button [disabled]="..." type="submit" class="ui button primary">Store</button>
现在如果我点击一个提交(存储)按钮确认踢 - 都很好。但是,如果我点击取消,它也会触发验证。我想知道为什么?我不需要任何验证取消。我需要做些什么来关闭它?
答
点击Cancel
按钮后,我会重新初始化FormGroup。这将彻底清除表格并强制所有的输入状态再次被预存。如果你还没有使用输入状态来验证它们是否已被使用,你应该使用输入状态。它将阻止验证在尚未使用的表单输入上运行。
组件
constructor() {
this.Form = initForm();
}
initForm() {
return this._FormBuilder.group({
fieldOne: ['', Validators.required]
})
}
输入
<div class="ui input" [class.error]="Form.get('fieldOne').dirty && !Form.get('fieldOne').valid">
<input type="text" placeholder="Search..." formControlName="fieldOne">
</div>
按钮
<button (click)="initForm()" type="button" class="ui button">Cancel</button>
附:它看起来像你使用Semantic UI,所以我的HTML格式相应。如果不是,你需要稍微修改一下。
答
你可以简单地'重置'formControl
s在父formGroup
取消按钮点击如果这对你可以。
cancel() {
this.form.reset();
}
表单封装的模式或东西?用户点击取消时的预期行为是什么? – joshrathke
有一个路由器守卫,否则它只是一个表格。我想点击取消不会触摸验证 – alvipeo