Form validation is not working in angular

Question

I have a reactive form where the submit button should be disabled until aa inputs are filled

I have tried using ngmodel and ngForm parameters to disable the button but it is not enabled when the inputs are filled

this is my code

<form #uploadForm="ngForm">
    <div class="uploadDiv">
  <div *ngFor="let data of fileList, let i = index">

    <label class="adpLabel">{{data.fileDesc}}</label>   
    <input readonly class="adpInput" type="text" [(ngModel)]='listFilter' name="listFilter" value={{filename[i]}}>
    <input type="file" id="{{data.fileName}}"
    #selectFiles hidden accept=".xls,.xlsx" (change)="getFileInfo($event, i)">
    <button mat-button (click)="selectFiles.click()" class="browseBtn">Browse</button>    
  </div>

<div class="adpButtons"> 
        <button mat-button [disabled]="!uploadForm.valid" (click)="clickFileUpload()">Upload</button>
        <button mat-button disableRipple tabindex="-1" mat-dialog-close>Back</button>
</div>

    </div>
</form>

I expect the upload button to be enabled when input is filled

EDIT 1: Adding ts code

getFileInfo(event, i) {
   if(this.file[i]){
      this.file.splice(i,1,event.target.files);
      this.fileType.splice(i,1,event.target.id);
   }
   else{
      this.file[i]=event.target.files;
      this.fileType[i]=event.target.id;
      //this.file.push(event.target.files);
      //this.fileType.push(event.target.id);
   }
   for (let j = 0; j < this.file.length; j++) {
      let fileName:string='';
      let extension:string;
      if(event.target.files[j]){
       fileName=event.target.files[j].name;
       extension = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
      } 
      let id:any; 
      if(this.fileType[j]){
        id=this.fileType[j];
      }
      if ( extension==".xls" || extension==".xlsx" ) {
        this.filename[i] = fileName; 
        this.fileType[i] = id;
      }
   }
}

show the ts file code

Prashant Pimpale
– Prashant Pimpale

2019-04-08 12:19:38 +00:00
Commented Apr 8, 2019 at 12:19 — Prashant Pimpale
– Prashant Pimpale, Commented Apr 8, 2019 at 12:19
added the ts file code @PrashantPimpale

Danny
– Danny

2019-04-08 12:25:26 +00:00
Commented Apr 8, 2019 at 12:25 — Danny
– Danny, Commented Apr 8, 2019 at 12:25
Expecting uploadForm code

Prashant Pimpale
– Prashant Pimpale

2019-04-08 12:26:20 +00:00
Commented Apr 8, 2019 at 12:26 — Prashant Pimpale
– Prashant Pimpale, Commented Apr 8, 2019 at 12:26
I don't understand your question

Danny
– Danny

2019-04-08 12:30:05 +00:00
Commented Apr 8, 2019 at 12:30 — Danny
– Danny, Commented Apr 8, 2019 at 12:30
where did you declared uploadForm?

Prashant Pimpale
– Prashant Pimpale

2019-04-08 12:31:56 +00:00
Commented Apr 8, 2019 at 12:31 — Prashant Pimpale
– Prashant Pimpale, Commented Apr 8, 2019 at 12:31

raghavendra bobbili · Accepted Answer · 2019-04-08 12:08:46Z

0

try giving template variable for the input ie

<input .... #<tempvar name>="ngModel" />

answered Apr 8, 2019 at 12:08

raghavendra bobbili

563 bronze badges

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

Comments

Severin Klug · Accepted Answer · 2019-04-08 12:10:27Z

You are not really using Angular Reactive Forms - or at least not correctly. https://angular.io/guide/reactive-forms

You define a Formgroup and Controls in your .ts file, a form with controls in your .html file and connect both.

https://stackblitz.com/edit/angular-reactive-forms?file=app%2Fapp.component.html

.ts

SignupForm: FormGroup;

this.SignupForm = new FormGroup({
 'username':new FormControl(null),
 'email':new FormControl(null)
});

.html

<form [formGroup]="SignupForm" (ngSubmit)="onSubmit()">
 <input type="text" formControlName = "username">
</form>

With this setup you can get controls from the formgroup and evaluate their status

.ts

  get controlUsername() {
   return this.SignupForm.get('username');
  }

.html

<button [disabled]="!controlUsername.valid" type="submit">Submit</button>

Swams reggae · Accepted Answer · 2019-04-08 12:10:46Z

0

Instead of NgModel use FormControlName to validate. For reference: https://angular.io/guide/reactive-forms

answered Apr 8, 2019 at 12:10

Swams reggae

611 silver badge7 bronze badges

Comments

Prashant Pimpale · Accepted Answer · 2019-04-08 12:43:32Z

0

If you want to check if there are any files selected or not to allow a user to submit the request then check with the length of fileList

<button mat-button [disabled]="fileList.length == 0" (click)="clickFileUpload()">Upload</button>

Here is Stackblitz

answered Apr 8, 2019 at 12:43

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

Comments

Suhas Parameshwara · Accepted Answer · 2019-06-26 17:47:16Z

0

You can use the required attribute on the input field like

<input type="file" id="{{data.fileName}}"
#selectFiles hidden accept=".xls,.xlsx" (change)="getFileInfo($event, i)" required>

And also just a suggestion, try to use reactive forms as much as possible. It's so simpler and has a lot of options when compared to template-driven forms.

answered Jun 26, 2019 at 17:47

Suhas Parameshwara

1

Collectives™ on Stack Overflow

Form validation is not working in angular

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related