すでにチェックされたアイテムをフェッチできないため、change()
またはclick()
関数を使用せずに、コンポーネント内のフォームのすべてのチェックされたアイテムをフェッチしたいのですが。
TSでの私の配列は次のとおりです。
PartyRoles = [
{
Id: 1,
Name: "Vendor",
Checked: true
},
{
Id: 2,
Name: "Client",
Checked: true
},
{
Id: 3,
Name: "Consigner",
Checked: false
}
]
私のHTMLフォーム:
<form (ngSubmit)="editPartyRolesSubmit()">
<div *ngFor="let item of PartyRoles">
<label>
<input type="checkbox" value="{{item.Id}}" [attr.checked]="item.Checked==true ? true : null" [attr.disabled]="item.Id==1 ? true : null" />
<span innerHTML="{{item.Name}}"></span>
</label>
</div>
</form>
チェックしたすべての値を取得したいonSubmit関数:
editPartyRolesSubmit= function () {
// Please suggest how to fetch checked items
}
あなたはFormとNgModelを使うことができます
<form #checkboxForm="ngForm" (submit)="editPartyRolesSubmit()">
<div *ngFor="let item of PartyRoles">
<label>
<input type="checkbox" value="{{item.Id}}" [(ngModel)]="item.Checked" [name]="item.Name" [attr.disabled]="item.Id==1 ? true : null" />
<span innerHTML="{{item.Name}}"></span>
</label>
</div>
<input type="submit" value="Submit">
</form>
機能することができます
editPartyRolesSubmit() {
console.log(this.PartyRoles);
}
あなたはこれを使うことができます:
<form (ngSubmit)="editPartyRolesSubmit()">
<div *ngFor="let item of PartyRoles; let i = index">
<label>
<input type="checkbox"
[attr.checked]="item.Checked == true ? true : null"
(change)="item.Checked = !item.Checked"
[attr.disabled]="item.Id==1 ? true : null" />
<span innerHTML="{{item.Name}}"></span>
</label>
</div>
<button type="submit">Click</button>
</form>
または:
<form (submit)="editPartyRolesSubmit()">
<div *ngFor="let item of PartyRoles">
<label>
<input type="checkbox" value="{{item.Id}}" [(ngModel)]="item.Checked" [name]="item.Name" [attr.disabled]="item.Id==1 ? true : null" />
<span innerHTML="{{item.Name}}"></span>
</label>
</div>
<button type="submit">Click</button>
</form>
Htmlを次のように変更します。
<form (ngSubmit)="editPartyRolesSubmit()">
<div *ngFor="let item of PartyRoles">
<label>
<input type="checkbox" value="{{item.Id}}"
[checked]="item.Checked"
(change)="item.Checked = !item.Checked"
[attr.disabled]="item.Id==1 ? true : null" />
<span innerHTML="{{item.Name}}"></span>
</label>
</div>
</form>
PartyRoles
は最新のチェックボックス値で更新されたままになります。例として次のようにアクセスできます。
editPartyRolesSubmit(){
// Access each item like this in PartyRoles
this.PartyRoles.forEach(role=>{
console.log('Id: ' + role.Id + ', Name: ' + role.Name + ', Checked: ' + role.Checked);
});
// Or like this
let role = this.PartyRoles.find(x=>x.Id === 1);
if(role !== undefined){
console.log(role);
}
// Or a filetered list
let checkedRoles = this.PartyRoles.filter(x=>x.Checked === true);
console.log(checkedRoles);
// Or by array index
let roleTwo = this.PartyRoles[2];
console.log(roleTwo);
}
メソッドでfunction
キーワードを使用する必要はありません。これが working demo へのリンクです。