How to enable submit button correctly in Angular 5?

Question

I have the current form from the template:

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

The validation message show correctly when blur from the field. But the submit button is disabled. If the user enter a valid value in the input and move the mouse to the submit button, he can't press the button. Any idea what should I change/add in order to make it work? thanks.

Try binding the ngModel to some property [(ngModel)]="somePropertyOnYourComponent" — Adrian Brand, Oct 12 '18 at 03:53
The problem is that I don't want to click tab, I want the user to be able to move the mouse directly to button and click it. — user2304483, Oct 12 '18 at 04:02

score 0 · Answer 1 · answered Oct 12 '18 at 03:52

0

I think the problem there is no action for that button, so instead of "button" try using "input":

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

and create the class "form-submit" in your CSS to give some format to the button.

answered Oct 12 '18 at 03:52

F Huerta

31
1

1

the button doesn't need an action to be disabled or enabled. This is not a correct answer – Patricio Vargas Oct 12 '18 at 03:57
1

See [this](https://stackoverflow.com/questions/3543615/difference-between-input-type-submit-and-button-type-submittext-butto) SO question. – Jeroen Heier Oct 12 '18 at 03:58

score 0 · Answer 2 · answered Oct 13 '18 at 05:22

What I did is remove the ngModelOptions from the input tag and added onblur to the FormControl directly, somthing like this:

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'
        })
      });
    }

It is still not 100% but at least it allow the user finish typing before showing the message. The only problem now is that when the user inside a field and have invalid value, as soon as he move the mouse to the button, the button is enable and become disabled only after actually clicking on it (error message show in this case as well).

score -1 · Answer 3 · answered Oct 12 '18 at 05:02

in angular forms you have to implement button with type="submit" to tell angular that when click occur on that button submit the form with that angular know which button has to submit the form may there's more that one button in the form.

submit the form in angular

How to enable submit button correctly in Angular 5?

3 Answers3