angular validation for selecting option from drop down and accordingly inputting next field-CodePudding

I am new to Angular and got stuck in validation.

My problem is that I have dropdown menu with 4 options to select. when user selected one option I want an input field to change validation in such a way that:

If user select option 1 in the drop down than I want in the next input field to have the validation required and maximum length 8 numbers. likewise If the user select option 2 in the drop down. I want the input field to have the validation required and maximum length of 5 number. so i got stuck in validation how to do it. Any help and idea would be greatly appreciated

CodePudding user response：

Here's a working example: https://stackblitz.com/edit/angular5-select-option-dropdown-ynguds

You can do it in various ways, but in a nutshell:

[1] I've built a form group in case you need to add more fields and control them all in the form.

this.group = this.fb.group({
    inputField: new FormControl('',[Validators.required]),
});

If your input field's value is something you want to work with later - you set Validators.required to the field so that user must insert a value.

[2] On change of dropdown item, the method clears validators of input field and add new ones, depending on the index of the selected item from the dropdown.

selectionChanged(event) {
    let idx = event.target.value;
    console.log('id:', idx);
    this.group.controls['inputField'].clearValidators();

    if (idx == 0) {
      this.group.controls['inputField'].setValidators([
        Validators.required,
        Validators.maxLength(8),
      ]);
    }
    (...)
    this.group.updateValueAndValidity();
}

Better way to do this would be to have an array of objects for the dropdown, in which you'll also have defined validators for each item, and it would be more dynamic. Anyway, see if this suits you.

CodePudding user response：

html:

 <form [formGroup]="selectForm">
 <div >
 <label >option</label>
 <select  (change)="selection($event)" name="select"  
 id="select" formControlName="select">
 <option value="option1">option1</option>
 <option value="option2">option2</option>
 <option value="option3">option3</option>
 </select>
 </div>
                          
 <div >
<label >Input:</label>
<input type="number"  formControlName="input">
</div>
</form>

ts:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from 
'@angular/forms';

@Component({
 selector: 'app-select',
 templateUrl: './select.component.html',
 styleUrls: ['./select.component.scss']
})
export class SelectComponent implements OnInit { 
}

 selectForm:FormGroup;
 select:null;
 input:any = '';


 constructor(
  private formBuilder: FormBuilder,
  ) { }

 ngOnInit(): void {
  this.createForm();
 }

  createForm(){

   this.selectForm = this.formBuilder.group({
  
   input:["",Validators.required],    
  })  
 }

 selection(event){
  let option = event.target.value;
  console.log('id:', option);
  this.selectForm.controls['input'].clearValidators();

 if (option == "option1") {
  this.selectForm.controls['input'].setValidators([
    Validators.required,
    Validators.maxLength(8),
   ]);
 }
 if (option == "option2") {
  this.selectForm.controls['input'].setValidators([
    Validators.required,
    Validators.maxLength(8),
  ]);
}
if (option == "option3") {
  this.selectForm.controls['input'].setValidators([
    Validators.required,
    Validators.maxLength(8),
  ]);
}

this.selectForm.updateValueAndValidity();
}