others - angular - 在表单中复选框中检索数据

我使用formBuilder在构造函数和初始化字段中定义了一个表单;

component.ts


constructor(private formBuilder: FormBuilder,


) {


 this.checkoutForm = this.formBuilder.group({


 selectedAccount: '',


 selectedContactInfo: '',


 });


}



html中,我有两个用户应该选择的地方; 下拉菜单和选中复选框,从构造函数中的selectedAccount应用到<mat-select>,它工作正常; 提交表格时,我可以看到我所选的账户,但是我不能应用 formControlName="selectedContactInfo"到复选框区域中的div ; 它返回空字符串。

component.html


<!-- DROPDOWN - WORKS PERFECT -->


<mat-form-field>


 <mat-label>CHOOSE ACCOUNT</mat-label>


 <mat-select formControlName="selectedAccount">


 <mat-option *ngFor="let account of accounts" [value]="account.name">{{account.name}}</mat-option>


 </mat-select>


</mat-form-field>



<!-- CHECKBOXES - DOESN'T RETRIEVE DATA WHEN FORM IS SUBMITTED -->


h2 class="mat-h2">CHOOSE TELEPHONE NUMBERS WE CAN CONTACT YOU ON</h2>


<div formControlName="selectedContactInfo" class="item-container">


 <mat-checkbox>{{contactInfo.privateMobile}}</mat-checkbox>


 <mat-checkbox>{{contactInfo.workMobile}}</mat-checkbox>


</div>



我希望selectedContactInfo包含复选框的数据; 如果两者都被选中,它将返回,

不知道它是否相关:


onSubmit(userData) {


 console.log(userData);


}



时间:

因为你需要为checkbox本身添加formControlName,所以不能返回数据,你不能将它添加到div 。

请check这个例子


@Component({


 template: `


 <form [formGroup]="form">


 <input type="checkbox" formControlName="rememberLogin"> Remember login


 </form>


 <p>Form value: {{ form.value | json }}</p> 


 <!-- {rememberLogin: true } -->


 `,


})


export class App {


 constructor(public fb: FormBuilder) {


 this.form = this.fb.group({


 rememberLogin: [true]


 });


 } 


}



...