我有一个有角度的形式(反应形式)和后端服务 . 该服务告诉我用户界面中有多少个复选框以及标签及其值 .
我想知道如何将标签值绑定到UI . 由于我获取所有数据但不确定如何在使用FormBuilder时绑定标签 . 这是我的代码 .
所以我的数据如下: -
[
{
"facility_module_id": null,
"module_id": "PM001",
"module_name": "User management ",
"mandatory_flag": 1,
"parent_moduleId": null
},
{
"facility_module_id": null,
"module_id": "PM002",
"module_name": "Library Management",
"mandatory_flag": 1,
"parent_moduleId": null
},
{
"facility_module_id": null,
"module_id": "PM003",
"module_name": "Settings Management",
"mandatory_flag": 1,
"parent_moduleId": null
}]
我的表单生成器如下所示: -
this.form = this._fb.group({
'clientName': ['', [Validators.required, ValidationService.isAlphabetNSpace]],
'hospitalGroup': ['', [Validators.required, ValidationService.isAlphabetNSpace]],
'addressLineOne': ['', Validators.required],
'addressLineTwo': ['', Validators.required],
'city': ['', Validators.required],
'state': ['', Validators.required],
'postalCode': ['', Validators.required],
'deployment': ['', Validators.required],
'details': this._fb.array([
this.initDetails()
]),
'modules': this._fb.array([
])
});
我所说的FormGroup就在这里
initModules(data) {
return this._fb.group({
'moduleName': [data.facility_module_id],
'moduleCheck': [data.mandatory_flag]
});
}
现在问题是我希望模块名称是一个标签,但不知道如何将数据与前端与标签绑定 .
请让我知道如何使用FormBuilder将数据绑定到标签 . 我的复选框如下: -
<app-wizard-section title="Module Selection">
<div formArrayName="modules">
<div class="col-lg-3" *ngFor="let module of form.controls.modules.controls; let i=index">
<div class="panel-body" [formGroupName]="i">
<input class="checkbox-custom" type="checkbox" id="cb-{{i}}" formControlName="moduleCheck">
<label for="cb-{{i}}" class="checkbox-custom-label">My Patients</label>
</div>
</div>
</div>
</app-wizard-section>
1 回答
假设您的代码有效,标签可以简单地绑定到formControlName中的相同变量 . 例如,如果要显示复选框输入的值,则可以执行以下操作:
我在表单中做同样的事情,看起来我们一直在使用相同的指南 . 您可以使用moduleCheck formControlName,类似于控制器中的变量 .
我通过输入的指令编辑了一些表单值 . 例如,如果我在表单中输入了文本信用卡,我制作了一个信用卡指令,它将操纵输入并将其推出以便动态地通过表单进行验证 . 此外,您可以使用所需的任何事件指令在输入值上调用修饰符
供参考:https://angular.io/docs/ts/latest/guide/reactive-forms.html