クリックすると、すべての理由が選択されます。

Question

こんにちは、私は複数の値を持つchecboxを設計していますが、私は1つの のチェックボックスをクリックしたときには、すべての

<div [ngClass] = "{'form-group': true}"> 
       <label>{{initialInformationDetails.objectiveOfUtilisingServiceText}}</label> 
      <div> 
       <label *ngFor = "let objective of initialInformationDetails.objectiveOfUtilisingService"> 
       <input type="checkbox" 
         name="objective" 
         formControlName = "objectiveOfUtilisingServiceControl" 
         value="{{objective.value}}" 
         [(ngModel)]="userInfo.objective"/> {{objective.value}} 
       </label> 
       </div> 
      </div> 

Answer 1

使用[確認]の代わりに[（ngModel）]を選択し

<div [ngClass] = "{'form-group': true}"> 
       <label>{{initialInformationDetails.objectiveOfUtilisingServiceText}}</label> 
      <div> 
       <label *ngFor = "let objective of initialInformationDetails.objectiveOfUtilisingService"> 
       <input type="checkbox" 
         name="objective" 
         formControlName = "objectiveOfUtilisingServiceControl" 
         value="{{objective.value}}" 
         [checked]="userInfo.objective"/> {{objective.value}} 
       </label> 
     </div> 
</div> 

Answer 2

反応的なフォームを使用しているので、それを利用してください。反応性のある形でngModelを使用することはお勧めしません。 ReactiveFormsModuleには、ngModel指示文も含まれていません。

複数のチェックボックスがあるので、値をキャプチャするにはFormArrayを使用する必要があります。 FormArray objectiveOfUtilisingServiceControlsと呼ぶことができます。

次に、フォーム配列にアイテムを追加または削除する方法があります。 onChangeを

(change)="onChange(objective.value, $event.target.checked)" 

：私たちは、テンプレートに変更イベントを持っている私たちは、チェックボックスのブール値を渡している、それが確認されたりいない場合は意味だけでなく、我々はフォームの配列に追加する実際のアイテム我々は、フォームの配列に新しいFormControlを押すか、それがオフになっている場合、我々はフォームの配列からフォームコントロールを削除

onChange(value:string, isChecked: boolean) { 
    let objectiveOfUtilisingServiceControls = 
       <FormArray>this.myForm.controls.objectiveOfUtilisingServiceControls; 

    if(isChecked) { 
    objectiveOfUtilisingServiceControls.push(new FormControl(value)); 
    } else { 
    let index = 
     objectiveOfUtilisingServiceControls.controls.findIndex(x => x.value == value) 
    objectiveOfUtilisingServiceControls.removeAt(index); 
    } 
} 

：メソッドは次のようになります。

事前チェックされている値があるので、最初にフォーム配列にその値を追加する必要があります。 （fbがFormbuilderを参照している）

ngOnInit() { 
    // build form 
    this.myForm = this.fb.group({ 
    objectiveOfUtilisingServiceControls: this.fb.array([]) 
    }); 

//iterate and check which object matches the with the value in 'userInfo.objective' 
for (let obj of this.initialInformationDetails.objectiveOfUtilisingService) { 
    if (obj.value == this.userInfo.objective) { 
     this.onChange(obj.value, true) 
     break; 
    } 
    } 
} 

、テンプレートでprechecked値としては、ちょうど[checked]を使用します：

を、私たちはこのように見ることができるフォームを、内蔵された後に我々はそれを行うことができます

<label *ngFor="let objective of initialInformationDetails.objectiveOfUtilisingService"> 
    <input type="checkbox" (change)="onChange(objective.value, $event.target.checked)" 
     [checked]="userInfo.objective == objective.value"/> {{objective.value}} 
</label> 

フォームを送信するときは、フォームのすべての値がmyForm.valueになっています。ちょうどmyFormを実際のフォーム名に変更してください。