如何使用Angular2 CheckboxControlValueAccessor？

任何人都可以帮助我在Angular2中实现CheckboxControlValueAccessor吗？任何人都可以分享一些使用CheckboxControlValueAccessor的例子吗？如何使用Angular2 CheckboxControlValueAccessor？

我有从API检索即

{"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.我一个JSON也需要跟踪用户的选择更改。

组件文件是：

@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>

来源

2016-09-08 Ashish Chauhan

欢迎所以。请改善你的问题。目前还不清楚你的问题是关于什么。这个问题应该包含代码来展示你试图完成什么以及你被困在哪里。请查看关于如何提出良好问题的帮助菜单。 –

我已根据您的输入修改了内容。如果你需要，我也可以创建一个JSfiddle。 –

然后请发布您尝试构建的组件的代码以及有关您失败的位置的信息。 –

-3

用这种方式在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) 
    } 

}

来源

2016-09-08 06:41:01

谢谢@Bharat Chauhan –

但这个答案并不显示如何为用户'CheckboxControlValueAccessor' – Kosmonaft

如何使用Angular2 CheckboxControlValueAccessor？

回答

相关问题