特定のオプションは、ダイナミックフォームの角の内側にドロップダウンから選択された表示隠すテキストボックス

Hriajtriknt:

私は、ユーザーができ、フォーム持っている追加 one/moreのdivのアドレスを上のclick追加のボタンを

私は、ユーザーがあればしたい選択し options=5、ドロップダウンから、その特定のアドレス本部に表示し、非表示のテキストボックスにしたいです。

コンポーネントのコード

        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;
            }
          }
JMP:

あなたは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デモ

おすすめ

転載: http://43.154.161.224:23101/article/api/json?id=30522&siteId=1