CODEWITHSUNDEEP
angularangular-reactive-forms
Bhrungarajni
Bhrungarajni

Reputation: 2535

how to detect the boolValue and enable the input field from formArray using angular8

i have formArray which is getting binded by the dynamic array of objects coming from API. if the boolValue is true then the input field must be enabled or it must be disabled. but here i am able to bind the values but not able to enable/disable the input fields based on boolValue.

Demo: DEMO

HTML:

 <div formArrayName="array">
    <div class="col" *ngFor="let value of values;let i = index">
      <div [formGroupName]="i">
        <div class="custom-control custom-switch mb-3">        
          <label class="custom-control-label">
            <input type="checkbox" formControlName="boolValue" (click)="selectedbool(i)" /> 
            {{value.label}}
          </label>
        </div>
        <input type="text" formControlName="datetime" (click)="dateRestriction(i)" class="onlyDateTime"/>
      </div>
    </div>
  </div>

Ts:

this.form = this.FB.group({
          array: this.FB.array(
            this.values.map(x => this.FB.group({
              boolValue: this.FB.control(x.boolValue),
              datetime: this.FB.control(x.datetime)
            }))
          )
        }); 



values =  [ 
{
      id: 17,
      value: null,
      label: "Inactive From",
      datetime: null,
      boolValue: false
    },
    {
      id: 20,
      value: null,
      label: "No Access to System From",
      datetime: null,
      boolValue: false
    },
    {
      id: 23,
      value: null,
      label: "Restrict New Business",
      datetime: null,
      boolValue: true
    }];

Upvotes: 0

Views: 50

Answers (1)

andsilver
andsilver

Reputation: 5972

When you set the boolValue formcontrol, use this:

boolValue: this.FB.control({
    disabled: !x.boolValue,
    value: x.boolValue,
})

https://angular.io/api/forms/FormControl

You can check it here

Upvotes: 1

Related Questions