web-dev-qa-db-ja.com

Angular Reactive Formarrayで、ドロップダウン値を混乱させることなくカスケードドロップダウンを機能させる方法

angular 4に、名と姓を含むフォームと、カスケードドロップダウンと削除ボタンとして機能する2つのドロップダウン（選択）を含むフォーム配列があります。フォームの残りの部分にも送信が含まれていますボタンとオプションの追加ボタン。わかりやすくするために、ここにスクリーンショットを追加しました。フォームの追加、削除ボタン、送信ボタンが機能する1つの問題があります。カスケードドロップダウンが1つある場合にのみ、カスケードドロップダウンが機能します。カスケード選択の前のグループから値を選択します。2番目の選択を選択すると混乱します。より良い外植のためにここに写真を追加しました。

enter image description here

2番目と3番目の画像でわかるように、カスケードドロップダウンが機能しています。基準で選択を変更すると、2番目のドロップダウンで選択する適切なオプションが表示されます enter image description here

enter image description here

enter image description here

4番目の画像5番目のPpictureと6番目の画像では、オプションの追加ボタンが機能していることがわかりますが、オプション2の最初のドロップダウンで基準を選択すると、オプション1の2番目のドロップダウンが台無しになり、2番目のオプションのドロップダウンの選択肢も含まれるようになりました

enter image description here

enter image description here

これが私のhtmlコードです

<form [formGroup] = "profileForm">

  <h1>Profile Form</h1>

 <div>
  <label for = "first-name-input">First Name</label>
  <input type="text" id="first-name-input" formControlName ="firstNameInput">
</div>
 <div>
    <label for = "last-name-input">Last Name</label>
    <input type="text" id="last-name-input" formControlName ="lastNameInput">
  </div>

  <div formArrayName="optionGroups">

    <div *ngFor="let optionGroup of profileForm.controls['optionGroups'].controls;  let i=index "[formGroup]="optionGroup">


      <h4>Option {{ i + 1 }} </h4>




     <div>
      <label for = "select-input">Criteria</label>
      <select id="select-input" (change)="onSelectSelect($event.target.value, i)"  formControlName ="selectInput">

          <option value="0" disabled selected>Select a Criteria</option>
          <option *ngFor="let select of selects"  [value]= "select.name">{{select.id}}</option>


        </select>

        <label for = "where-input">Option</label>
        <select id="where-input" formControlName ="whereInput">
  
            <option value="0" disabled selected>Select a Option</option>
            <option *ngFor="let where of wheres" value= {{where.name}}>{{where.id}}</option>


          </select>

          <button type ="button" (click)="removeOptionGroup(i)">X</button>

         


     </div>

    </div>

   </div>
   <button type ="button" (click)="addOptionGroup()">Add Options</button>
   <div>

    <button type ="button" (click)="saveProfileForm()">Send </button>

   

   </div>

</form>

そして、これが私のコンポーネントファイルです

export class PowComponent {

 selects: Select[];
 wheres: Where[];


 public profileForm : FormGroup;

 public addOptionGroup(){

 const fa = this.profileForm.controls["optionGroups"] as FormArray;

  fa.Push(this.newOptionGroup());

  }

  public removeOptionGroup(index: number){

   const fa = this.profileForm.controls["optionGroups"] as FormArray;

    fa.removeAt(index);

   }


   public saveProfileForm(){

    console.log(this.profileForm.value);
   }



   constructor(public router: Router,  public dropdownqueryservice:    DropDownQueryService , private fb : FormBuilder) {
    this.profileForm = this.fb.group({

        firstNameInput : [ "" ],
        lastNameInput : [ "" ],
        optionGroups : this.fb.array([
            this.fb.group({

              selectInput : [ "" ],
              whereInput : [ "" ],

          }),
       ]),
    });

    this.selects = this.dropdownqueryservice.getSelect();
    this.wheres=[];

}

onSelectSelect(selectid, i) {
    this.wheres = this.dropdownqueryservice.getWhere().filter((item)=> item.selectid == selectid);

  }


 private newOptionGroup() {
  return new FormGroup({

      selectInput: new FormControl(""),
      whereInput: new FormControl(""),

  });
   }

  }
angulartypescriptangular-reactive-formscascadingdropdownformarray
9
user3277530

コメントで前に述べたように、問題は複数の選択フォームの一意のselects配列から発生しています。

Selectの配列の配列を作成する必要があります。これには、選択値ごとに可能な基準の配列が含まれています。

ここにstackblitzソリューションの提案があります 、私はそれをシンプルに保ち、それを機能させるためにいくつかの変更を加えました。懸念事項をより明確にしたい場合は、自由にフォークして編集してください。

5
ibenjelloun