无表格 - 跳过验证上取消

我有拥有取消和提交按钮的反应形式：无表格 - 跳过验证上取消

<button (click)="cancel($event)" type="button" class="ui button">Cancel</button> 
<button [disabled]="..." type="submit" class="ui button primary">Store</button>

现在如果我点击一个提交（存储）按钮确认踢 - 都很好。但是，如果我点击取消，它也会触发验证。我想知道为什么？我不需要任何验证取消。我需要做些什么来关闭它？

来源

2017-09-16 alvipeo

表单封装的模式或东西？用户点击取消时的预期行为是什么？ – joshrathke

有一个路由器守卫，否则它只是一个表格。我想点击取消不会触摸验证 – alvipeo

点击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格式相应。如果不是，你需要稍微修改一下。

来源

2017-09-16 02:38:21 joshrathke

你可以简单地'重置'formControl s在父formGroup取消按钮点击如果这对你可以。

cancel() { 
this.form.reset(); 
}

来源

2017-09-16 02:51:32 amal

无表格 - 跳过验证上取消

回答

相关问题