CODEWITHSUNDEEP
javascriptangularangular2-formsangular2-formbuilder
Shiv Kumar Ganesh
Shiv Kumar Ganesh

Reputation: 3825

Binding the label value using FormBuilder Angular 2

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>

Upvotes: 1

Views: 11694

Answers (1)

Pezetter
Pezetter

Reputation: 2862

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

Upvotes: 2

Related Questions