Question

我有一个具有取消和提交按钮的被动形式：

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

现在，如果我点击“提交（商店）”按钮，验证就会启动 - 一切都很好。但如果我点击取消它也会触发验证。我想知道为什么？我不需要取消任何验证。关闭它需要做什么？

Answer 1

如果可以，您可以在取消按钮点击时简单地“重置”父formControl中的formGroup。

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

Answer 2

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

P.S。看起来您正在使用语义UI，因此我的HTML格式相应。如果不是，你需要稍微修改一下。

Answer 3

它适用于event.preventDefault（）

<button (click)="cancel($event)">Cancel</button>

cancel(event) {
    event.preventDefault()
}

反应表单 - 跳过取消验证

3 个答案: