typescript 任何输入值更改时的Angular 启用按钮

lymnna71 于 2023-03-31 发布在 TypeScript

关注(0)|答案(2)|浏览(142)

在我的Angular 12应用程序中，我有一个带有多个输入的React式表单和一个提交表单的保存按钮。默认情况下，SAVE按钮是禁用的，只有在编辑了ANY的输入值时才需要启用它。我知道这可以通过调用（input）事件，但有没有更有效的方法来做到这一点。我的意思是，而不是写一个（input）事件，可能会使用一些东西，如果任何输入被更改，就会触发。
我的HTML表单具有以下结构：

<form [formGroup]="profileInfoForm" (ngSubmit)="submitProfileInfoForm()">
   <input class="form-control" type="text" formControlName="firstName" name="firstName
</form>

typescript

来源：https://stackoverflow.com/questions/75834814/angular-enable-button-on-any-input-value-change

2条答案

按热度按时间

iezvtpos1#

如果用户没有更改控件的值，则控件是原始的。
样本码

<button [disabled]="xyzForm.pristine"class="xyz">Save</button>

赞(0）回复(0）举报 2023-03-31

qoefvg9y2#

您可以在表单中使用valueChanges和一个布尔变量来保持原始的未更改状态：

isFormEdited: boolean = false;

ngOnInit() {

  this.profileInfoForm.valueChanges
    .pipe(takeUntil(this._unsubscribeAll))
    .subscribe(() => {
      this.isFormEdited = true;
    });

}

因此，当isFormEdited变为true时，您将启用该按钮

<button [disabled]="!isFormEdited">Save</button>

赞(0）回复(0）举报 2023-03-31

我来回答

typescript 任何输入值更改时的Angular 启用按钮

2条答案

相关问题

热门标签

最新问答