web-dev-qa-db-ja.com

Angular ngIf formGroup

Angularにフォームがあり、ドロップダウンリストで選択した値に従って入力を表示できます。

これが私のコードの例です：

（2つを選択すると、入力が表示されます）

https://stackblitz.com/edit/angular-fqkfyx

[formGroup] = "usForm"のままにすると、入力表示が機能しません。一方、タグフォームの[formGroup] = "usForm"を削除すると、コードは期待どおりに機能します。したがって、問題は[formGroup] = "usForm"に関連しています

私のhtml：

 <div class="offset-md-2">
  <form [formGroup]="usForm">
    <div class="div-champs">
      <p id="champs">Type
        <span id="required">*</span>
      </p>
      <div class="select-style ">
          <select [(ngModel)]="selectedOption" name="type">
              <option style="display:none">
              <option [value]="o.name" *ngFor="let o of options">
                {{o.name}}
              </option>
          </select>
      </div>
    </div>
    <p id="champs" *ngIf="selectedOption == 'two'">Appears
      <input type="appears" class="form-control" name="appears">
    </p>
  </form>
</div>

私のcomponent.ts：

import { Component, OnInit } from '@angular/core';

import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-create-us',
  templateUrl: './create-us.component.html',
  styleUrls: ['./create-us.component.css']
})
export class CreateUsComponent implements OnInit {

  public usForm: FormGroup;
  public selectedOption: string;

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
    this.createForm();
  }

  createForm() {
    this.usForm = this.fb.group({
      'type': [null, ],
      'appears': [null, ],
    });
  }

  options = [
    { name: 'first', value: 1 },
    { name: 'two', value: 2 }
  ];
}

実際にそれがダースの入力を持つ大きな形であるのと同じくらい私の問題を単純化しました

よろしくお願いします

よろしく、バレンティン

htmlangularformstypescriptangular-ng-if
4
Valentin

[(ngModel)]の代わりにformControlNameを使用する必要があります。

そして比較すると、selectedValueではなくusForm.value.typeと比較する必要があります。

これを試してみてください：

<div class="offset-md-2">
  <form [formGroup]="usForm">
    <div class="div-champs">
      <p id="champs">Type
        <span id="required">*</span>
      </p>
      <div class="select-style ">
          <select formControlName="type" name="type">
              <option style="display:none">
              <option [value]="o.name" *ngFor="let o of options">
                {{o.name}}
              </option>
          </select>
      </div>
    </div>
    <p id="champs" *ngIf="usForm.value.type == 'two'">Appears
      <input type="appears" class="form-control" name="appears">
    </p>
  </form>
</div>

これが、参考のための Sample StackBlitz です。

11
SiddAjmera

テンプレートは、フォームグループが作成される前に読み込まれます。フォームグループの作成中にngIfを停止します。

<div class="offset-md-2" *ngIf="usForm">
    <form [formGroup]="usForm">
0
alexey28