Form Validation using a boolean flag Angular 8

Question

In HTML I have a (change)="limitUser($event)" function. In typescript I have a for loop which runs through each element and checks if the value is less than 10. If it exceeds 10 it sets the inValid = true. In HTMl all my form fields set the value as true. I want only the form field with value greater than 10 to be set as true.

HTML Code:

<div *ngFor="p of data; let i = index">
<label>p.name{{i}}</label>
<input type="text" class="form-control" (change)="limitUser($event)" name="p.name{{i}}" [(ngModel)]="p.usage" id="p.name">
<div class="danger" *ngIf="inValid">
Please enter number smaller than 10
</div>
</div>

In typescript:

limitUser(event){
for (let i = 0; i < this.data.length; i ++) {
if (this.data[i].usage = 0 || this.data[i].usage = null || this.data[i].usage = ""){
this.data[i].usage = 0;
}
if (this.data[i].usage > 10){
this.inValid = true;
}

But inValid = true is applied to all the dynamic form fields. How can I put it only on the field whose value is larger than 10.

I have closed the </div> tag. But otherwise it is a valid HTML code as it is running fine. Its just the validation is not being applied correctly — Bitly
– Bitly, Commented Jul 14, 2020 at 12:32
yes I closed those. Thank you for that input. I just typed the code didn't copy it. but can you figure out the issue now? — Bitly
– Bitly, Commented Jul 14, 2020 at 12:34
Problem is that you only have one global flag. You need a ‘invalid’ flag on each of your data items. — MikeOne
– MikeOne, Commented Jul 14, 2020 at 12:41

Tashi Tobgay Dakpa · Accepted Answer · 2020-07-14 13:39:05Z

1

Well, inValid is one boolean variable and you're expecting it to hold the validity for every applicable field.

Either have a separate variable for every field, or create a method that checks the validity for each field. Let's go with the second approach:

So, your HTML code should look like this (update the *ngIf directive):

<div *ngFor="p of data; let i = index">
 <label>p.name{{i}}</label>
 <input type="text" class="form-control" name="p.name{{i}}" (change)="limitUser($event)" [(ngModel)]="p.usage" id="p.name">
 <div class="danger" *ngIf="isInvalid(i)">
  Please enter number smaller than 10
 </div>
</div>

And add a new method in your TS, as well as modify limitUser():

isInvalid(index) {
 return this.data[index].usage > 10;
}

limitUser(event) {
 for (let i = 0; i < this.data.length; i ++) {
  // btw, use === to compare; == means loosely compare and = means assign
  // or just append ! to check for falsy values, like:
  if (!this.data[i].usage){
   this.data[i].usage = 0;
  }
 }
}

You can reuse your inValid variable to check the overall validity of the form, or just remove it.

UPDATE:

To disable the submit button when everything is disabled:

Modify your submit button to include a [disabled] attribute in the HTML:

...
<button type="submit" [disabled]="isFormInvalid">
...

And in the TS:

get isFormInvalid() {
 return this.data.some(datum => datum.usage > 10);
}

edited Jul 14, 2020 at 13:39

answered Jul 14, 2020 at 12:50

Tashi Tobgay Dakpa

3531 silver badge9 bronze badges

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

9 Comments

Bitly Over a year ago

here are you suggesting i should use a for loop in isInvalid(index) {} function too? Otherwise it will throw an error right away, isn't it?

Tashi Tobgay Dakpa Over a year ago

@Bitly no need for a forLoop, Angular runs change detection automatically (unless specified otherwise). So, the isInvalid function will run automatically every time a change is detected. Try to use the the function as it is in my answer. And let me know if it works out for you :)

Bitly Over a year ago

I am not sure why but I am getting the error for return this.data[i].usage < 10

Tashi Tobgay Dakpa Over a year ago

Oh shoot I made a mistake, use index instead of i. I have updated the answer. Try again @Bitly, so sorry for that

Bitly Over a year ago

it did @Tashi Starset

|

Collectives™ on Stack Overflow

Form Validation using a boolean flag Angular 8

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related