I have an angular form(Reactive form) and a backend Service. The service tells me how many check box can be there in the User Interface as well as the labels and their values.

I want to know how can I bind the label values to the UI. Since I am getting all the data but am not sure how to bind the labels while using the FormBuilder. Here goes my code.

So my data looks like as follows :-

[
  {
    "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
  }]

My Form Builder Looks like following:-

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([
      ])
    });

The FormGroup which I ma talking about is here

initModules(data) {
    return this._fb.group({
      'moduleName': [data.facility_module_id],
      'moduleCheck': [data.mandatory_flag]
    });
  }

Now the thing is I want the Module name to be a label but have no clue how to bind the data with the front-end with the label.

Please let me know how to use FormBuilder to bind data to the label. My checkbox looks as follows:-

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

I have an angular form(Reactive form) and a backend Service. The service tells me how many check box can be there in the User Interface as well as the labels and their values.

I want to know how can I bind the label values to the UI. Since I am getting all the data but am not sure how to bind the labels while using the FormBuilder. Here goes my code.

So my data looks like as follows :-

[
  {
    "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
  }]

My Form Builder Looks like following:-

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([
      ])
    });

The FormGroup which I ma talking about is here

initModules(data) {
    return this._fb.group({
      'moduleName': [data.facility_module_id],
      'moduleCheck': [data.mandatory_flag]
    });
  }

Now the thing is I want the Module name to be a label but have no clue how to bind the data with the front-end with the label.

Please let me know how to use FormBuilder to bind data to the label. My checkbox looks as follows:-

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

• javascript
• angular
• angular2-forms
• angular2-formbuilder

Share Improve this question Follow edited Feb 9, 2017 at 15:04 developer033 24.9k88 gold badges8484 silver badges113113 bronze badges asked Feb 9, 2017 at 14:35 Shiv Kumar GaneshShiv Kumar Ganesh 3,8251010 gold badges4848 silver badges8585 bronze badges 1

• Can you please clarify your question? – developer033 Commented Feb 9, 2017 at 15:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

Assuming your code works, the label can be bound to simply with the same variable in your formControlName. For example, If you wanted to display the value of the checkbox input, you would do:

<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">{{module.get('CONTROL').value}}</label> 
        // I dont like calling methods in double binding, so I would just save the value in a variable in your controller when your checkbox input (changes)'s
      </div>
    </div>
  </div>
 </app-wizard-section>

I am doing the same thing in my forms, and it looks like we've been using the same guides. You can use the moduleCheck formControlName similar to a variable in your controller.

I edit some of my form values through directives on the inputs. For example, if i have a text credit card input in my form, I made a credit-card directive that will manipulate the input and push it out to be validated by the form dynamically. In addition, you can call a modifier on the value on input using whatever event directive you want

(keydown)="changeFormInputValue($event)"

changeFormInputValue(ev) {
  if (this.YOURFORMCONTROLNAME.value.length > 1) {
    this.YOURFORMCONTROLNAME.clearAsyncValidators();
    this.YOURFORMCONTROLNAME.patchValue('NEW Value goes here');
  } 
}

For reference: https://angular.io/docs/ts/latest/guide/reactive-forms.html