如何在用户单击角度6的提交按钮后禁用表单上的提交按钮

Question

这是我希望按钮执行的操作。我希望禁用按钮，直到用户在表单中输入所有值需要它为止。用户在表单中输入所有值后，用户应该可以单击“提交”按钮。然后，在用户单击“提交”按钮后，应再次禁用此按钮

我尝试这样的事情

html

 <div class="field is-grouped">
              <p class="control">
              <button class="button is-info"
                  [disabled]="!aFormGroup.dirty || !FormGroup.valid "
                  type="submit"
                   onClick= "this.disabled=true" 
                  >Submit</button>
              </p>
</div

ts

submit() {..}

我的按钮在用户单击按钮时被禁用，但是从api中没有得到任何结果。似乎什么也没有发送到api

此作品

html

 <div class="field is-grouped">
          <p class="control">
          <button class="button is-info"
              [disabled]="!aFormGroup.dirty || !FormGroup.valid "
              type="submit"
              >Submit</button>
          </p>

ts

 submit() {..}

但是用户单击后我的按钮并未禁用

Answer 1

您可以在组件中定义一个公共布尔字段，并将值绑定到html中的[disabled]属性。

[disabled]="!aFormGroup.dirty || !aFormGroup.valid || isDisabled"

并且在submit方法中将值设置为true。

这里是一个小例子https://stackblitz.com/edit/angular-ygdag8