Getting error in validation while submitting the form

Question

I have a form, inside the form I'm showing a textbox on selecting the dropdown I'm calling a form array, where i get multiple textboxes. When i submit my form is showing invalid even when i give values for all fields.

  
           
                        
                        <input type="text" class="form-control" placeholder="Type" formControlName="type">                                      

                        <select class="Dropdown" formControlName="category" >
                            <option >Select Category</option>
                            <option  *ngFor="let list of dropdownitems" [value]="list.id" >{{list.name}}</option>
                        </select> 

                    <ng-container *ngIf="optionValue == '3'">
                                               
                          <input type="text" formControlName="listItem" class="form-control" placeholder="enter dropdownlist items"> 
                        <small class="errormessage" *ngIf="submitted && addForm.controls.listItem.hasError('required')">
                            Category is required 
                        </small>
                          <a (click)="addGroup()">Add New Textfield</a>

                    </ng-container>
                    
                     <span formArrayName="times" *ngFor="let time of addForm.controls.times?.value; let i = index;">                          
                      <span [formGroupName]="i">                         
                            <input type="text" class="form-control" formControlName="lists" placeholder="enter dropdown options">  

                      </span>

In ts i'm validating all the fields. onSubmit() function, if the form is invalid i'm showing an alert. Please correct my code and help me achieve this functionality.

 ngOnInit(): void {
    this.addForm = this.formBuilder.group({
      name: ['', [Validators.required, Validators.pattern('[a-zA-Z# ]*')]],
      times: this.formBuilder.array([])
      }); 
    console.log(this.addForm.value);
  }

public dropdownitems = [{
    name: "A",
    id: 1
  },{
    name: "B",
    id: 2
  },{
    name: "B",
    id: 3   
  },{
    name: "D",
    id: 4    
  }]

  onSubmit(){
    this.submitted = true;
    if (this.addForm.invalid) {
      alert ('Please fill up complete details');
      return;
    }
    console.log(this.addForm.value);   
}


value = this.formBuilder.group({
  lists: ['', Validators.required],
});


addGroup() {
  const val = this.formBuilder.group({
    lists: ['', Validators.required],
  });
  const form = this.addForm.get('times') as FormArray;
  form.push(val);
}

removeGroup(index) {
  const form = this.addForm.get('times') as FormArray;
  form.removeAt(index);
}

}

Hugo Noro · Accepted Answer · 2021-02-06 18:04:39Z

1

The problem is that even if the fields are hidden in the template (HTML) they are defined in the form as required.

You need to either add and remove the form fields conditionally or you need to make them enabled / disabled to ignore the required flag.

Sharing here the fixed Stackblitz with a possible solution and small improvement (removed the ngModel

You have a similar issue raised on this thread form validation on hidden fields

edited Feb 6, 2021 at 18:04

answered Feb 6, 2021 at 15:14

Hugo Noro

3,2732 gold badges16 silver badges19 bronze badges

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

7 Comments

Hugo Noro Over a year ago

First step, did you understand why you are having the issue?

Hugo Noro Over a year ago

Check this answer in particular stackoverflow.com/a/51379633/9019541 you need to enable or disable depending on your selection

Hugo Noro Over a year ago

Yes because the problem is that your value is not 3. Is C. Your dropdown values are letters. Try changing it to compare with C instead of 3.

Hugo Noro Over a year ago

Can you please put a console.log(category) inside value.changes to printout the value you are receiving? I’m trying to check it on the phone but stackblitz doesn’t work great on a phone

Hugo Noro Over a year ago

OK. Which number? Do you ever get a 3? Also you are doing another mistake. When using reactive forms you don’t need [(ngModel)]. That might also be messing up the detection of changes and creating conflicts. You’re mixing two approaches: template based (with ngModel) and reactive forms ( with formControlName)

|

Collectives™ on Stack Overflow

Getting error in validation while submitting the form

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related