时间戳

首页 > 解决方案 > 如何在 Angular 5 中正确启用提交按钮？

angular - 如何在 Angular 5 中正确启用提交按钮？

问题描述

我有模板中的当前表格：

  <form #tripForm='ngForm' (ngSubmit)="addTrip(tripForm)" novalidate> 
    <input type="text" class="form-control" placeholder="" id="new_trpo_name" name="new_trip_name"
     [ngModelOptions]="{ updateOn: 'blur' }" new_trip_name 
     required minlength="3" ngModel #new_trip_name="ngModel">

    <div *ngIf="new_trip_name.errors && (new_trip_name.dirty || new_trip_name.touched)">
            <div class="error_message" *ngIf="new_trip_name.errors.required">
                    <span class="e_arrow"></span>
                    <i>Please enter trip name</i>
            </div>      
    </div>
    <div class="error_message" *ngIf="new_trip_name.errors.minlength">
        <span class="e_arrow"></span>
        <i>Trip name require minimum of {{ new_trip_name.errors.minlength.requiredLength }} characters</i>
    </div>
    <div class="form-group">
           <button class="btn btn-md btn-default trip_submit" [disabled]="!tripForm.valid">Add Trip</button>                                                            
    </div>
 </form>

从现场模糊时，验证消息正确显示。但是提交按钮被禁用。如果用户在输入中输入了一个有效值并将鼠标移动到提交按钮上，他就无法按下该按钮。知道我应该更改/添加什么以使其正常工作吗？谢谢。

标签： angularangular-forms

解决方案

我所做的是从输入标签中删除 ngModelOptions 并直接将 onblur 添加到 FormControl 中，如下所示：

ngOnInit() {
      this.nameForm = new FormGroup ({
        firstname: new FormControl('', {
          validators: Validators.required,
          asyncValidators: [yourAsyncValidatorFunction],
          updateOn: 'blur'
        }),
        lastname: new FormControl('', {
          validators: Validators.required,
          asyncValidators: [yourAsyncValidatorFunction],
          updateOn: 'blur'
        })
      });
    }

它仍然不是 100%，但至少它允许用户在显示消息之前完成输入。现在唯一的问题是，当用户在字段中并且具有无效值时，只要将鼠标移到按钮上，该按钮就会启用并仅在实际单击后才变为禁用状态（在这种情况下也会显示错误消息）。

推荐阅读