Angular 4: Access Form Controls in HTML page

Question

I am validating my HTML form in Angular 4 , wanted to enable/disable a button by checking if a form is valid/invalid

<form novalidate #shiftForm="ngForm">
   <table>
   <thead>
      <th>Name</th>
      <th>time</th>
   </thead>
   <tbody *ngFor=let item of Items>
      <tr>
         <td>
            <div class="form-group">
               <input class="form-control" type="text" required name="shiftName"
               [(ngModel)]="item.ShiftName"#shiftName="ngModel" id="shiftName">
               <div *ngIf="shiftName.invalid && (shiftName.dirty || shiftName.touched)" class="alert alert-danger">
                  <div *ngIf="shiftName.errors.required">REQUIRED</div>
               </div>
            </div>
         </td>
         <td>
            <div class="form-group">
               <input class="form-control" type="text" required name="shiftTime"
               [(ngModel)]="item.ShiftTime" #shiftTime="ngModel" id="shiftTime">
               <div *ngIf="ShiftTime.invalid && (ShiftTime.dirty || ShiftTime.touched)" class="alert alert-danger">
                  <div *ngIf="ShiftTime.errors.required">REQUIRED</div>
               </div>
            </div>
         </td>
      </tr>
   </tbody>
   </table>
<button [disabled]="shiftForm.invalid"
(click)="updateItems()">APPLY
</button>
</form>

component file :

import {Component, OnInit, Inject, ViewChild, SimpleChange, SimpleChanges} from '@angular/core';
import {ElementRef, Renderer2} from '@angular/core';
import {Transition, StateService} from '@uirouter/angular';
import {ViewEncapsulation} from '@angular/core';

@Component({
    selector: 'shift-details',
    templateUrl: './shift-details.component.html',
    styleUrls: ['./shift-details.component.less'],    
    encapsulation: ViewEncapsulation.None
})

export class ShiftDetailsComponent implements OnInit {

    //variable declaration
    Items:any = [];

    constructor(
                private rd: Renderer2,                                        
                private transition: Transition,
                private $state: StateService) {
        this.$stateParams = transition.params();
    }

    ngOnInit() {
    this.Items = getShiftItems();      
    }

    getShiftItems() {
    //calling the service here to load the data in this.Items     

    }


    updateItems() {
     //calling the service here to update this.Items

     }

}

Even though when both the input fields are empty and showing the validation error shiftForm.invalid is still not disabling the button. I have tried shiftForm.form.shiftName.invalid, shiftform.shiftName.invalid, shiftForm.form['shiftName'].invalid,shiftForm.controls['shiftName'].invalid etc.. None of them are working. Even when i try just the element name directly like shiftName.invalid or shiftName.errors still the button is not getting disabled.

What am i doing wrong ? I wanted to validate the form in HTML file only, do not want to do reactive form validation in the typescript file.

can you add your component.ts file

Robert
– Robert

2018-03-26 04:34:48 +00:00
Commented Mar 26, 2018 at 4:34 — Robert
– Robert, Commented Mar 26, 2018 at 4:34

Bharat Gupta · Accepted Answer · 2018-03-26 12:20:59Z

2

You need to change the name property of each of the controls. name property needs to be unique.

So change...

<input class="form-control" type="text" required name="shiftName"
       [(ngModel)]="item.ShiftName"#shiftName="ngModel" id="shiftName">

to

<input class="form-control" type="text" required 
       name="shiftName-{{item.ShiftName}}"
       [(ngModel)]="item.ShiftName" #shiftName="ngModel" id="shiftName">

and do the same change for shiftTime control too.

Also, you have a typo in the *ngIf checks for shiftTime. It should be shiftTime and not ShiftTime.

Please check this demo

edited Mar 26, 2018 at 12:20

answered Mar 26, 2018 at 5:09

Bharat Gupta

2,6941 gold badge22 silver badges27 bronze badges

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

4 Comments

sabithpocker Over a year ago

Please add relevant code from stackblitz to the answer here.

Bharat Gupta Over a year ago

Thanks @sabithpocker

Bharat Gupta Over a year ago

@Srini did you check the demo on stackblitz? What is the expected behaviour?

hakuna Over a year ago

Sorry my bad, i did check it just now. Its working. Thanks !

Sujith S · Accepted Answer · 2018-03-26 07:03:19Z

Try this set of code. it will work

import {Component, OnInit, Inject, ViewChild, SimpleChange, SimpleChanges} from '@angular/core';
import {ElementRef, Renderer2} from '@angular/core';
import {Transition, StateService} from '@uirouter/angular';
import {ViewEncapsulation} from '@angular/core';

@Component({
    selector: 'shift-details',
    templateUrl: './shift-details.component.html',
    styleUrls: ['./shift-details.component.less'],    
    encapsulation: ViewEncapsulation.None
})

export class ShiftDetailsComponent implements OnInit {

    //variable declaration
    Items:any = [];

    constructor(
                private rd: Renderer2,                                        
                private transition: Transition,
                private $state: StateService) {
        this.$stateParams = transition.params();
    }

    ngOnInit() {
    this.Items = getShiftItems();      
    }

    getShiftItems() {
    //calling the service here to load the data in this.Items     

    }


    updateItems() {
     //calling the service here to update this.Items

     }

}

 <form novalidate #shiftForm="ngForm" (submit)="updateItems()">
   	<table>
	   <thead>
	      <th>Name</th>
	      <th>time</th>
	   </thead>
	   <tbody *ngFor=let item of Items>
	      <tr>
	         <td>
	            <div class="form-group">
	               <input class="form-control" type="text"  id="shiftName" name="shiftName"
	               [(ngModel)]="item.ShiftName" #shiftName="ngModel" required>
	               <div *ngIf="shiftName.invalid && (shiftName.dirty || shiftName.touched)" class="alert alert-danger">
	                  <div *ngIf="shiftName.errors.required">REQUIRED</div>
	               </div>
	            </div>
	         </td>
	         <td>
	            <div class="form-group">
	               <input class="form-control" type="text" id="shiftTime" name="shiftTime"
	               [(ngModel)]="item.ShiftTime" #shiftTime="ngModel" required>
	               <div *ngIf="shiftTime.invalid && (shiftTime.dirty || shiftTime.touched)" class="alert alert-danger">
	                  <div *ngIf="shiftTime.errors.required">REQUIRED</div>
	               </div>
	            </div>
	         </td>
	      </tr>
	   </tbody>
   	</table>
	<button type="submit" [disabled]="shiftForm.invalid"> APPLY </button>
</form>

Collectives™ on Stack Overflow

Angular 4: Access Form Controls in HTML page

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related