Search code examples
angular-reactive-formsangular8requiredfieldvalidatorngmodel

set ngModel value to null after changing selected option


i have a form which contains a select option and a div section depends on the selected option. in the select option if i choose 1 for exemple , an input will be displayed

component.ts

types : any[] = [
{ value : '1'},
{ value : '2'},
{ value : '3'}
];

createForm = this.fb.group({
firstInput:['',Validators.required],
secondInput:['',Validators.required],
thirdInput:['',Validators.required],
});

component.html

<select class="form-control" [value]="selected"[(ngModel)]="selectedValue">
<option *ngFor="let x of types">{{x.value}}</option>
</select>

<div *ngIf="selectedValue == '1'">
<label for="1" class="control-label">1</label>
<input id="1" class="form-control" type="text" formControlName="firstInput">
</div>

<div *ngIf="selectedValue == '2'">
<label for="2" class="control-label">2</label>
<input id="2" class="form-control" type="text" formControlName="secondInput">
</div>

<div *ngIf="selectedValue == '3'">
<label for="3" class="control-label">3</label>
<input id="3" class="form-control" type="text" formControlName="thirdInput">
</div>

all the fields are required, my problem is : when i choose "1" for exemple without filling the input of "1" then i change for the second choice "2" and fill it, i can't submit the form because the fielControllName "firstInput" is empty despite being invisible, so i need to clear the selected value of ngModel ( as i think ) with each change.


Solution

  • So Initially your form must be like:

    createForm = this.fb.group({
      selectedValue:[null,Validators.required],
      firstInput:[null],
      secondInput:[null],
      thirdInput:[null],
    });
    

    Your HTML code:

     <form  [formGroup]="createForm">
        <select class="form-control" formControlName="selectedValue">
         <option *ngFor="let x of types" value="{{x.value}}">{{x.value}}</option>
        </select>
    
        <div *ngIf="createForm.value.selectedValue== '1'">
         <label for="1" class="control-label">1</label>
         <input id="1" class="form-control" type="text" formControlName="firstInput">
        </div>
    
        <div *ngIf="createForm.value.selectedValue== '2'">
         <label for="2" class="control-label">2</label>
         <input id="2" class="form-control" type="text" formControlName="secondInput">
        </div>
    
        <div *ngIf="createForm.value.selectedValue== '3'">
         <label for="3" class="control-label">3</label>
         <input id="3" class="form-control" type="text" formControlName="thirdInput">
        </div>
    </form>
    

    Then you must have on change Function:

        OnChange() {
            this.createForm.get('selectedValue').valueChanges.subscribe(
              val => {
                if (val==1) {
                  this.createForm.get('firstInput').setValidators([Validators.required]);
                  this.createForm.controls['firstInput'].updateValueAndValidity();
                  this.createForm.get('secondInput').setValidators([]);
                  this.createForm.controls['secondInput'].updateValueAndValidity();
                  this.createForm.get('thirdInput').setValidators([]);
                  this.createForm.controls['thirdInput'].updateValueAndValidity();
                }
                else if (val==2) {
                  this.createForm.get('firstInput').setValidators([]);
                  this.createForm.controls['firstInput'].updateValueAndValidity();
                  this.createForm.get('secondInput').setValidators([Validators.required]);
                  this.createForm.controls['secondInput'].updateValueAndValidity();
                  this.createForm.get('thirdInput').setValidators([]);
                  this.createForm.controls['thirdInput'].updateValueAndValidity();
                }
               else if (val==3) {
                  this.createForm.get('firstInput').setValidators([]);
                  this.createForm.controls['firstInput'].updateValueAndValidity();
                  this.createForm.get('secondInput').setValidators([]);
                  this.createForm.controls['secondInput'].updateValueAndValidity();
                  this.createForm.get('thirdInput').setValidators([Validators.required]);
                  this.createForm.controls['thirdInput'].updateValueAndValidity();
                }
              }
            )
          }
    

    if you want to make value null you can use:

    this.createForm.patchValue({
      firstInput:null,
      secondInput:null,
      thirdInput:null,
    })