如何在 Angular 5 中正确启用提交按钮？答案

【问题标题】：How to enable submit button correctly in Angular 5?如何在 Angular 5 中正确启用提交按钮？
【发布时间】：2019-03-17 05:27:56
【问题描述】：

我有来自模板的当前表单：

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

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

【问题讨论】：

可以添加ts文件吗？
尝试将 ngModel 绑定到某个属性 [(ngModel)]="somePropertyOnYourComponent"
您确定您点击的是标签页吗？触发模糊？
问题是我不想点击tab，我希望用户能够直接将鼠标移到button上点击。

标签： angular angular-forms

【解决方案1】：

我所做的是从输入标签中删除 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%，但至少它允许用户在显示消息之前完成输入。现在唯一的问题是，当用户在字段中并且具有无效值时，只要将鼠标移到按钮上，该按钮就会启用并仅在实际单击后才变为禁用状态（在这种情况下也会显示错误消息)。

【讨论】：

【解决方案2】：

在 Angular 表单中，您必须使用 type="submit" 实现按钮，以告诉 Angular 当单击该按钮时提交具有该角度的表单，知道哪个按钮必须提交表单，表单中可能还有多个按钮。

submit the form in angular

【讨论】：

【解决方案3】：

我认为问题在于该按钮没有操作，因此请尝试使用“输入”而不是“按钮”：

<div class="form-submit">
    <input type="submit" value="Add Trip"> 
</div>

并在您的 CSS 中创建“form-submit”类，为按钮提供某种格式。

【讨论】：

按钮不需要禁用或启用操作。这不是正确答案
见this SO问题。