Показать скрытое текстовое поле, если выбрана опция c из выпадающего списка в Dynami c form Angular

Question

У меня есть форма, где пользователь может добавить one/more div Адрес на click Добавить Кнопка .

Я хочу, чтобы пользователь выбрал options=5 из раскрывающегося списка, хотел бы показать и скрыть текстовое поле в этом конкретном адресе Div.

Код компонента

        get contactFormGroup() {
            return this.form.get('Array') as FormArray;
          }

          ngOnInit() {
            this.form= this.fb.group({
              Array: this.fb.array([])
            });
          }

          createContact(): FormGroup {
            return this.fb.group({
              ABC: [null, Validators.compose([Validators.required])],
              Test: [null, Validators.compose([Validators.required])]
            });
          }

          addContact() {
            this.Group.push(this.createContact());
          }

          showValue(event) {
            const selectedValue = event;
            if (selectedValue === '5') {
                this.showValuetxtbox = true;
            } else {
                this.showValuetxtbox = false;
            }
          }

Answer 1

Взгляните на этот Stackblitz, он упоминается в Angular документах и может служить образцом для того, чего вы пытаетесь достичь.

Вы должны изолировать каждый возможный тип вопроса, создав для каждого отдельного class, чтобы вы могли формировать данные и затем использовать ngSwitch для динамического создания HTML соответственно.

Базовый класс вопроса:

export class QuestionBase<T> {
  controlType: string;
  value: T;
  key: string;
  label: string;
  // etc

  constructor(options) {
    // constructor logic
  }
}

Какой-то специальный класс, который наследуется от базового класса

import { QuestionBase } from './question-base';

export class SpecialQuestion extends QuestionBase<string> {
  controlType = 'specialQuestion';
  type: string;

  // special Question
  specialValue: string;


  constructor(options) {
    super(options);
    this.type = options['type'] || '';
  }
}

Затем компонент вопроса:

<div [formGroup]="form">
  <label>{{question.label}}</label>        
  <div [ngSwitch]="question.controlType">
    // controls logic
    <input *ngSwitchCase="'textbox'" >        
    <select *ngSwitchCase="'specialQuestion'"></select>
  </div>          
</div>

Затем вы добавляете это в компонент контейнера, где вы * l oop просматриваете весь массив вопросов.

Таким образом, ваш код будет пригоден для использования в будущем и будет использоваться повторно, когда вы добавите / измените функциональность своих форм в будущем. Вам не нужно будет создавать спагетти, чтобы удовлетворить требования крайнего случая, например, дополнительное поле ввода.

Answer 2

Поскольку вы зацикливаетесь на добавлении div, вы можете использовать переменную ссылки на шаблон в раскрывающемся списке. например, #select, затем обратитесь к этому в * ngIf:

    <form [formGroup]="addExpressionform">
        <div formArrayName="expressionArray">
            <div *ngFor="let item of contactFormGroup.controls; let i = index;" [formGroupName]="i">

              <carbon-dropdown #select
                                (optionSelected)="showValue($event)"
                                [formControlN]="'UOM'"
                                [options]="listOptions" [formGroup]="item"
                                name="UOM" 
                                >
                            </carbon-dropdown>

                            <carbon-text-input *ngIf="select.value == 5" 
                                [formControlN]="'Value'"
                                [formGroup]="item"
                                name="Value"
                                >
                            </carbon-text-input>
                    <carbon-button type="primary" (click)="submit()" id="save-parameter">Save</carbon-button>

            </div>                  
        </div>
    </form>

Упрощенная демонстрация StackBlitz .