angular - 反应式表单 - 在取消时跳过验证

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父级中的 s 。formGroup

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

Answer 2

它适用于 event.preventDefault()

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

cancel(event) {
    event.preventDefault()
}

Answer 3

单击按钮时，我将重新初始化 FormGroup Cancel。这将完全擦除表单并强制所有输入状态再次变为 prestine。您应该使用输入状态来验证它们是否已被使用（如果您尚未使用）。它将阻止验证在尚未使用的表单输入上运行。

零件

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>

PS 看起来您正在使用语义 UI，因此我的 HTML 已相应格式化。如果没有，您将需要对其进行一些返工。