CODEWITHSUNDEEP
angularvalidationangular4-forms
Janny
Janny

Reputation: 127

Disabling button is not working for angular4 validation

I have a submit button in my form, i am trying to disable it until all the text-boxes are filled. Its not working after page is refreshed or loaded for the first time in browser. If i perform any other operation in the same page and then open this add detail pop up it is disabled. Help will be much appreciated.

component

form: FormGroup;
 constructor(private fb: FormBuilder) {
    this.createForm();
}
createForm() {
    this.form = this.fb.group({
        name: ['', Validators.required],
        addrs: ['', Validators.required],
    });
}

HTML file 

<div id="details">
    <form [formGroup]="form" (ngSubmit)="addDetails()" name="form" novalidate>
        <div class="form-group">
            <label for="name">Name</label><input type="text"
                class="form-control" id="name" placeholder="Please Enter Name"
                formControlName="name" >
        </div>
        <div class="form-group">
            <label for="addrs">Address</label><input type="text"
                class="form-control" id="addrs"
                placeholder="Please Enter Address" formControlName="addrs" >

        <button type="submit" [disabled]="form.invalid || loading"
            class="btn btn-success">Submit</button>
        <br>
        <div *ngIf="loading" class="alert alert-success box-msg" role="alert">
            <strong>Added Successfully</strong>
        </div>
    </form>
</div>

Upvotes: 1

Views: 443

Answers (2)

Arun
Arun

Reputation: 49

Why you are using no validate in form tag? if no validate is mention in the form ,then the form will not get validated.it will simply execute accept whatever you enter inside the form.try and execute without novalidate ang ngmodel in input tag.it will work

Upvotes: 2

rrd
rrd

Reputation: 5957

Try this:

<button type="submit" [disabled]="form.status === 'INVALID' || loading"
        class="btn btn-success">Submit</button>

That should consider both options, loading and the invalid form.

Upvotes: 0

Related Questions