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

Question

我有一个带有取消和提交按钮的反应式表单：

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

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

Answer 1

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>

PS 看起来您正在使用 Semantic UI，因此我的 HTML 已相应地格式化。如果没有，你需要稍微修改一下。