Question

我有模板中的当前表格：

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

从字段模糊时，验证消息会正确显示。但是提交按钮被禁用。如果用户在输入中输入有效值，然后将鼠标移至“提交”按钮，则无法按该按钮。知道要更改/添加什么才能使其正常工作吗？谢谢。

Answer 1

我认为该按钮没有任何问题，因此请尝试使用“输入”代替“按钮”：

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

，然后在CSS中创建“表单提交”类，为按钮提供某种格式。

Answer 2

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

Answer 3

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

submit the form in angular

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

3 个答案: