Angular Form add input field based on dropdown value

Question

Does anyone have idea how to show additional input field based on select element value and push value into existing object?

There is a dropdown select element with change directive

<div class="col-sm-4">
  <select class="form-control mt-2" id="field_countries" name="country" #t formControlName="country" (change)="countryChanged(t.value)">
    <option [value]="country.name" *ngFor="let country of countries"> {{ country.name }} </option>
  </select
</div>

and countryChanged event

countryChanged(value) {
  this.selectedCountry = value;
  console.log(this.selectedCountry);
}

so I'm trying to add new input field based on selected value:

<div class="col-sm-4" *ngIf="selectedCountry == 'Mexico'">
  <input type="text" class="form-control" name="remark" formControlName="remark" maxlength="200" />
</div>

but I don't know how to show input field and push value only for object which value is selected for, so the result would be

equivalent to [{person: 'John', country: 'USA'}, {person: 'Pablo', country: 'Mexico', remark: 'Some data'}, {person: 'Michelle', country: 'France'}]

Stackblitz

Well, if the values are the same for each person and each country... I think you should use an external form. This way, the function controlling the remark field will only function with the right row. — RoadEx
– RoadEx, Commented Oct 2, 2018 at 12:21
You might just want to show/hide the remark field by CSS using the + or ~ selector. — Zammy
– Zammy, Commented Oct 2, 2018 at 12:23

Abdul Rafay · Accepted Answer · 2018-10-02 12:35:18Z

1

Match current value with template ref variable that u have declared as "t" like this:

*ngIf="t.value == 'Mexico'" here:

<div class="col-sm-4" *ngIf="t.value == 'Mexico'">
  <input type="text" class="form-control" name="remark" formControlName="remark" maxlength="200" />
</div>

and then you can remove blank attributes in submit function with some ES6:

  onSubmit() {
    this.persons = this.selectForm.get('persons') as FormArray;
    const temp: any = this.persons.value;
    temp.forEach((v) => {
      Object.keys(v).forEach((key) => (v[key] == '') && delete v[key]);
    })
    console.log(temp)
  }

Stackblitz

answered Oct 2, 2018 at 12:35

Abdul Rafay

3,3915 gold badges27 silver badges54 bronze badges

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

Comments

Ashish Ranjan · Accepted Answer · 2018-10-02 12:32:46Z

I modified your stack blitz a little: See it here: https://stackblitz.com/edit/select-populate-values-kyirzw?file=app%2Fapp.component.ts

While Initilizing the FormGroup, I didn't add the remark FromControl by Default.

  getFormGroupByN(n: number) {
  let result = [];
  for (let i = 0; i < n; i++) {
    result.push(this.formBuilder.group({
      'person': '',
      'country': ''
    })
    );
  } // for end 

  return result;
}

I modified the countryChanged() method of yours, which now also accepts an index of the FormArray. Now whenever I see that the country selected was Mexico I add a FormControl remark to that particular FormGroup at that index.

countryChanged(value, i) {
  this.selectedCountry = value;
  // this.getFormGroupByN(this.personsData.length);  // why were you calling this again?
  if (value == "Mexico") {
    let temp =  <FormGroup>(<FormGroup>this.selectForm.get('persons')).controls[i];
    temp.addControl('remark', new FormControl(''));
  }
}

The HTML for showing Input box for Remarks is now checking for the presence of the remark formContrl instead of the CountryName

<div class="col-sm-4" *ngIf="selectForm.get('persons').controls[i].get('remark')">
   <input type="text" class="form-control" name="remark" formControlName="remark" maxlength="200" />
</div>

Collectives™ on Stack Overflow

Angular Form add input field based on dropdown value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related