Disabling button is not working for angular4 validation

Question

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>

please dont tag angular questions with angularjs, or with extra non-relevant tags ie: angular4-httpclient — mast3rd3mon
– mast3rd3mon, Commented May 24, 2018 at 10:53
That's a Boolean i have called in addDetails function, when its true it shows success msg. — Janny
– Janny, Commented May 24, 2018 at 10:57
formControlName="Name" should be formControlName="name", no? — Michael Doye
– Michael Doye, Commented May 24, 2018 at 11:02
Can you reproduce the error here in this stackblitz, I don't see any issues — Pankaj Parkar
– Pankaj Parkar, Commented May 24, 2018 at 11:04

Arun · Accepted Answer · 2018-05-24 11:15:42Z

2

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

answered May 24, 2018 at 11:15

Arun

493 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Janny Over a year ago

novalidate is from preventing the browser side default validation.

rrd · Accepted Answer · 2018-05-24 11:05:59Z

0

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.

answered May 24, 2018 at 11:05

rrd

5,9873 gold badges32 silver badges37 bronze badges

Collectives™ on Stack Overflow

Disabling button is not working for angular4 validation

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related