gpt4 book ai didi

angular - 如何使用 Angular2 CheckboxControlValueAccessor?

转载 作者:行者123 更新时间:2023-12-05 08:13:25 26 4
gpt4 key购买 nike

谁能帮我在 Angular2 中实现 CheckboxControlValueAccessor?谁能分享一些使用 CheckboxControlValueAccessor 的例子?

我有一个从 API 检索的 JSON即

{"prefer":[{"name":"Send me Offers and Letters","preferenceId":"OffersAndLetter","selected":"Y"},{"name":"Need monthly reports","preferenceId":"monthlyReports","selected":"N"}],"comments":null,"status":"SUCCESS","errorDetails":[]}

现在我需要创建一个组件和关联的模板,动态创建表单/复选框字段并将所选值访问为 N 或 Y。我还需要跟踪用户的选择更改。

组件文件是:

@Component({
selector: 'ae-preferencesdata',
moduleId: module.id,
templateUrl: './preferences.html',
directives: [REACTIVE_FORM_DIRECTIVES, ControlMessages],
providers: [SavePreferences]})

export class PreferencesComponent {
public editPreferencesForm: any;
OffersAndLetter: boolean;
monthlyReports: boolean;

public _preferencesValue: Preferences = new Preferences();
constructor(private _formBuilder: FormBuilder, private _router: Router,
private _routeParams: RouteParams, public _editService: EditPreferences) { }

ngOnInit() {
this.editPreferencesForm = this._formBuilder.group({
'OffersAndLetter': this.OffersAndLetter,
'monthlyReports': this.monthlyReports
});
}

public populatingFields() {
if (this.OffersAndLetter !== undefined) {
this._preferencesValue.OffersAndLetter =
this.OffersAndLetter === true ? 'Y' : 'N';
} else {
this._preferencesValue.OffersAndLetter = $('#OffersAndLetter').val();
}
if (this.monthlyReports !== undefined) {
this._preferencesValue.monthlyReports =
this.monthlyReports === true ? 'Y' : 'N';
} else {
this._preferencesValue.monthlyReports = $('#monthlyReports').val();
}
}

public savePreferences() {
this.populatingFields();
let resp = this._editService.updateSchemePreferences(this._preferencesValue, workFlowStepCode,
parseInt(this._workflowActivityNo));
resp.subscribe(
data => {
if (data.status === 'SUCCESS') {
formSubmitted = true;
}
},
error => {
let errorText = error.text();
this._serverError = error.text().replace(/"/g, '');
}
});
}

public updateField(data) {
let targetID = data.target.id;
if (targetID === 'OffersAndLetter') {
this.OffersAndLetter = data.target.checked;
} else if (targetID === 'monthlyReports') {
this.monthlyReports = data.target.checked;
}

}

private setDefaultValues() {
this.OffersAndLetter = undefined;
this.monthlyReports = undefined;
}}

模板片段如下:

< td *ngFor="let subattribute of prefer" >< input  type="checkbox" name="{{subattribute.preferenceId}}{{subattribute.name}}" id="{{subattribute.preferenceId}}"
(change)="updateField($event)" class="i-checks m-l-mds" [value]="subattribute.selected"
></ td>

最佳答案

在 Angular2 中使用这种方式获取选中的复选框值:

@Component({
selector: 'checkbox',
template : `
<ul>
<li *ngFor="let chk of chkArray">
<input type="checkbox" (change)="selectChk($event,chk.id)" />
<span>{{chk?.title}}</span>
</li>
</ul>
`,
})

export class CheckboxComponent{

private chkSelected: Array<any>=[];
private chkArray:any = [
{id:1,title:'title1'},
{id:2,title:'title2'},
{id:3,title:'title3'}
];

selectChk(event, val){
if(event.target.checked === true){
this.chkSelected.push(val);
}else{
var index = this.chkSelected.indexOf(val);
this.chkSelected.splice(index, 1);
}
console.log(this.chkSelected)
}

}

关于angular - 如何使用 Angular2 CheckboxControlValueAccessor?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39382970/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com