角度-如果表单值未更改,则禁用提交按钮

时间:2019-02-26 08:25:09

标签: javascript angular forms

我有选定日期的表格。如果日期格式没有任何变化,如何禁用提交按钮?

我的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>

3 个答案:

答案 0 :(得分:2)

如果您使用下面的代码,则仅当用户以表格形式更改值时,按钮才会启用

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

enter image description here

答案 1 :(得分:0)

import numpy as np
import matplotlib.pyplot as plt
import seaborn as sns

x = np.arange(10)
y = x * 2

DF = pd.DataFrame({'x': x, 'y': y})

plt.figure(figsize=(10,10))
sns.kdeplot(DF["x"], DF["y"], cmap="viridis")

plt.figure(figsize=(10,10))
myplot = sns.jointplot(DF["x"], DF["y"], color ="blue")
myplot.fig.set_size_inches(10,10)

详细了解here

答案 2 :(得分:0)

希望这行得通!

  <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

相关问题