Javascript 角度-如果表单值未更改,则禁用提交按钮
我有所选日期的表格。如果日期表单中没有任何更改,如何禁用“提交”按钮 我的html代码Javascript 角度-如果表单值未更改,则禁用提交按钮,javascript,angular,forms,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"
<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>
开始*
*此字段为必填字段
*先填写持续时间
//提交按钮
提交
名字:
姓氏:
提交
请阅读更多有关它的信息希望这能奏效
<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>
名字:
姓氏:
提交
我的一些老问题
对于上面的代码,您需要使用RxReactiveFormsModule如果您使用下面的代码,则仅当用户更改表单中的值时,该按钮才启用
[disabled]="!(accountForm.valid && accountForm.dirty)"
您只希望在加载页面时使用此选项,还是在用户将值从原始更改为其他值,然后再更改回其他值时使用此选项?当用户将值从原始更改为其他值,然后再更改回其他值时,请尝试禁用此按钮。但是,当我尝试编辑日期时,按钮总是被禁用,然后在屏幕上尝试[disabled]=“!profileForm.dirty”或[readonly]=“!profileForm.dirty”input@SoniSilalahi你能分享你的完整表单代码吗?提交试试这个而不是脏的。
[disabled]="!(accountForm.valid && accountForm.dirty)"