Угловая форма добавляет поле ввода на основе раскрывающегося значения

Кто-нибудь знает, как показать дополнительное поле ввода на основе значения элемента выбора и вставить значение в существующий объект?

Есть выпадающий элемент выбора с директивой change

<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>

и countryChanged событие

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

поэтому я пытаюсь добавить новое поле ввода на основе выбранного значения:

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

но я не знаю, как отображать поле ввода и нажимать значение только для объекта, для которого выбрано значение, поэтому результат будет введите описание изображения здесь

эквивалент [{person: 'John', country: 'USA'}, {person: 'Pablo', country: 'Mexico', remark: 'Some data'}, {person: 'Michelle', country: 'France'}]

Stackblitz


typescript angular angular-forms formarray angular-formbuilder
person corry    schedule 02.10.2018    source источник
comment
Что ж, если значения одинаковы для каждого человека и каждой страны ... Я думаю, вам следует использовать внешнюю форму. Таким образом, функция, управляющая полем примечания, будет работать только с правой строкой.   -  person RoadEx    schedule 02.10.2018
comment
Вы можете просто показать / скрыть поле примечания с помощью CSS, используя селектор + или ~.   -  person Zammy    schedule 02.10.2018

Ответы (2)


arrow_upward
1
arrow_downward

Сопоставьте текущее значение с переменной шаблона ref, которую вы объявили как "t", например:

*ngIf="t.value == 'Mexico'" здесь:

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

а затем вы можете удалить пустые атрибуты в функции отправки с помощью некоторого 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

person Abdul Rafay    schedule 02.10.2018

arrow_upward
1
arrow_downward

Я немного изменил ваш блиц на стеке: смотрите здесь: https://stackblitz.com/edit/select-populate-values-kyirzw?file=app%2Fapp.component.ts

При инициализации FormGroup я не добавил remark FromControl по умолчанию.

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

  return result;
}

Я изменил ваш метод countryChanged(), который теперь также принимает index массива FormArray. Теперь всякий раз, когда я вижу, что выбранная страна Mexico, я добавляю FormControl remark к этой конкретной FormGroup в этой 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(''));
  }
}

HTML-код для отображения поля ввода для примечаний теперь проверяет наличие remark formContrl вместо 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>
person Ashish Ranjan    schedule 02.10.2018