angular2 template driven form validation issue

Question

I have problem with angular2 template driven form validation, Following is the code for my form.

  <h1>{{page_title}}</h1>
  <div *ngIf="success_flag" class="alert alert-success">
        {{success_message.message}}
  </div>
  <form  #add_book_form="ngForm"  (ngSubmit)="add_book(add_book_form)" novalidate>
              <div class="row">
                          <div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
                                      <div class="form-group clearfix">
                                            <label>Book Name</label>
                                            <input name="book_name" id="book_name" [(ngModel)]="book_name" class="form-control" required>
                                            <div *ngIf="book_name.invalid && (book_name.dirty || book_name.touched)" class="alert alert-danger">
                                                              <div *ngIf="book_name.errors.required">
                                                              Book Name is required.
                                                              </div>


                                                              </div>
                                      </div>
                                </div>
              </div>
              <div class="row">
                          <div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
                                      <div class="form-group clearfix">
                                            <label>Book Description</label>
                                            <textarea name="book_description" [(ngModel)]="book_description" class="form-control" required></textarea>
                                      </div>
                                </div>
              </div>
              <div class="row">
                          <div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
                                      <div class="form-group clearfix">
                                            <label>Book Published Date</label>
                                            <input name="book_published_date" [(ngModel)]="book_published_date" class="form-control"  required>
                                      </div>
                                </div>
              </div>      
              <div class="row">
                          <div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
                                      <div class="form-group clearfix">
                                            <label>Cover Image</label>
                                            <input name="book_cover_image" [(ngModel)]="book_cover_image" class="form-control" type="file" (change)="getFiles($event,'cover_image')" required>
                                      </div>
                                </div>
              </div>
              <div class="row">
                          <div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
                                      <div class="form-group clearfix">
                                            <label>PDF Copy</label>
                                            <input name="book_pdf_copy" [(ngModel)]="book_pdf_copy" class="form-control" type="file" (change)="getFiles($event,'pdf_copy')" required>
                                      </div>
                                </div>
              </div>
              <div class="row">
                          <div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
                                      <div class="form-group clearfix">
                                            <label>PDF Sample</label>
                                            <input name="book_pdf_sample" [(ngModel)]="book_pdf_sample" class="form-control" type="file" (change)="getFiles($event,'pdf_sample')" required>
                                      </div>
                                </div>
              </div>
              <div class="row">
                          <div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
                                      <div class="form-group clearfix">
                                            <label>Price</label>
                                            <input name="book_price" [(ngModel)]="book_price" class="form-control" type="number" required>
                                      </div>
                                </div>
              </div>
              <div class="row">
                          <div class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
                                      <div class="form-group clearfix  text-center">
                                            <button [disabled]="add_book_form.invalid" class="btn btn-success">Save Book</button>
                                      </div>
                                </div>
              </div>      
        </form>

Currently submit button is being disabled. When I try to fill up the book name field it has to be enabled, but still it is not working, I don't know where exactly issue exists. Errors message is also not being shown for the same.

Please help. Thanks

This might not be related but, why are you using novalidate here? — Nilay Vishwakarma
– Nilay Vishwakarma, Commented Mar 1, 2018 at 3:39
But your condition is to enable the button only if the entire form is valid. — danilo
– danilo, Commented Mar 1, 2018 at 3:39

Nilay Vishwakarma · Accepted Answer · 2018-03-01 03:42:20Z

1

@DBQ is right.

Instead of using :

<button [disabled]="add_book_form.invalid" class="btn btn-success">Save Book</button>

you should use:

<button [disabled]="add_book_form.controls['book_name'].invalid" class="btn btn-success">Save Book</button>

answered Mar 1, 2018 at 3:42

Nilay Vishwakarma

3,4812 gold badges30 silver badges50 bronze badges

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

Collectives™ on Stack Overflow

angular2 template driven form validation issue

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related