Angular 2 のリアクティブ フォームでチェックボックスの更新された値を取得するのに問題があります。テーブルに表示されたオブジェクトのリストがあり、ユーザーが行の編集をクリックすると、editAccountProject 関数が呼び出され、モーダル フォームにオブジェクトのプロパティを入力する必要があります。
コンポーネントには次のものがあります。
export class AccountProjectComponent implements OnInit {
@ViewChild('modal') modal: ModalComponent;
accountProjects: IAccountProject[];
accountProject: IAccountProject;
accountprjFrm: FormGroup;
constructor(private fb: FormBuilder){}
editAccountProject(id: number) {
this.accountProject = this.accountProjects.filter(x => x.AccountId === id)[0];
this.createForm();
this.accountprjFrm.patchValue({
AccountId: this.accountProject.AccountId,
AccountCode: this.accountProject.AccountCode
});
this.modal.open();
}
createForm() {
this.accountprjFrm.patchValue({
AccountId: this.accountProject.AccountId,
AccountCode: this.accountProject.AccountCode
});
const arrayControl = <FormArray>this.accountprjFrm.controls['AccountProjectLinks'];
this.accountProject.AccountProjectLinks.forEach(item => {
let newGroup = this.fb.group({
AccountProjectId: [item.AccountProjectId],
ProjectId: [item.ProjectId],
ProjectName: [item.ProjectName],
IsActive: [item.IsActive]
});
arrayControl.push(newGroup);
});
}
onSubmit(formData: any) {
this._accountprojectService.put(Global.BASE_ACCOUNTPROJECT_ENDPOINT, this.accountProject.AccountId, this.accountProject);
}
編集フォームが読み込まれる html テンプレートのモーダル部分:
<modal #modal>
<form novalidate (ngSubmit)="onSubmit(accountprjFrm)" [formGroup]="accountprjFrm">
<modal-header [show-close]="true">
<h4 class="modal-title">{{modalTitle}}</h4>
</modal-header>
<modal-body>
<div class="form-group">
<div>
<span>AccountId*</span>
<input readonly="readonly" type="text" class="form-control" placeholder="AccountId" formControlName="AccountId">
</div>
<div>
<span>Account Code*</span>
<input readonly="readonly" type="text" class="form-control" placeholder="AccountCode" formControlName="AccountCode">
</div>
<div formArrayName="AccountProjectLinks">
<div class="form-group" [formGroupName]="i" *ngFor="let AccountProjectLink of AccountProjectLinks.controls; let i=index">
<input type="text" style="float: left; width: 200px" readonly="readonly" class="form-control" formControlName="ProjectName" placeholder="ProjectName" />
<input type="checkbox" style="width: 50px" class="form-control"
formControlName="IsActive" placeholder="IsActive" />
<input type="hidden" style="width: 50px" class="form-control" formControlName="AccountProjectId" placeholder="AccountProjectId"/>
<input type="hidden" class="form-control" formControlName="ProjectId" placeholder="ProjectId" style="clear: both"/>
</div>
</div>
</div>
</modal-body>
<modal-footer>
<div>
<a class="btn btn-default" (click)="modal.dismiss()">Cancel</a>
<button type="submit" class="btn btn-primary">Update</button>
</div>
</modal-footer>
</form>
モデル:
import {IAccountProjectLink} from "./account-project-link"
export interface IAccountProject {
AccountId: number,
AccountCode: string;
AccountProjectLinks: IAccountProjectLink[];
}
export interface IAccountProjectLink {
AccountProjectId: number;
ProjectId: number;
ProjectName: string;
IsActive: boolean;
}
IsActive チェックボックスをオン/オフにすると、それに応じて IsActive フィールドを更新したいのですが、何か不足しています。
IsActive 値を更新するために何をしなければならないか教えてもらえますか?