ANGULAR - 如果表单值未更改，则禁用提交按钮答案

【问题标题】：ANGULAR - Disable submit button if form value not changedANGULAR - 如果表单值未更改，则禁用提交按钮
【发布时间】：2019-07-19 17:44:43
【问题描述】：

我有选定日期的表格。如果日期表单没有任何变化，如何禁用提交按钮？

我的html代码

<div class="col-xs-6">
   <label><i class="far fa-calendar-alt"></i> Start <span class="text-danger">*</span></label>
     <input id="startTrip1" name="NgbDate" data-provide="datepicker" ngbDatepicker #d="ngbDatepicker" [markDisabled]="markDisabled" [minDate]="minDates" type="text" class="form-control form-flat" [(ngModel)]="ad.start_date" (dateSelect)="onDateSelect($event, ad)" (blur)="validateInput()" (click)="d.toggle()" [ngModelOptions]="{standalone: true}" [disabled]="form.controls.tripduration.hasError('required')" >
      <div class="text-danger" *ngIf="(ad.start_date == '' || ad.start_date == undefined) && ngForm.submitted">
         * This field is required
       </div>
      <div class="text-danger" *ngIf="form.controls.tripduration.hasError('required')">
      * Fill the durations first
      </div>
 </div>
//submit button
<button class="col-xs-12 text-center text-strong pointer custom-trip-btn" (click)="publishTrip()">
<button class="custom-trip-btn">SUBMIT</button>

【问题讨论】：

您是否只在页面加载时才需要这个，或者当用户将值从原始值更改为其他值然后再返回时？
当用户将一个值从原始值更改为其他值，然后再次返回时

标签： javascript angular forms

【解决方案1】：

<form [formGroup]="profileForm">

  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>

</form>    

<button type="submit" [disabled]="!profileForm.dirty">Submit</button>

阅读更多关于它的信息here

【讨论】：

它可以禁用按钮。但是当我尝试编辑日期时，按钮总是被禁用
然后在输入上尝试 [disabled]="!profileForm.dirty" 或 [readonly]="!profileForm.dirty"
@SoniSilalahi 你能分享你的完整表单代码吗？
试试这个而不是脏。

【解决方案2】：

如果您使用下面的代码，该按钮仅在用户更改表单中的值时启用

[disabled]="!(accountForm.valid && accountForm.dirty)"

【讨论】：

【解决方案3】：

希望这行得通！

  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>

</form>    

<button [disabled]="!(profileForm.valid ||!profileForm['isDirty']())" 
class="btn btn-primary">Submit</button>

Check some what same question here

Stackblitz-example我的一些老问题

以上需要使用 RxReactiveFormsModule RxReactive npm

【讨论】：