Angular 8/ Reactive Form - Converting result of checkbox event to a string value

Question

I have my Reactive form with field - Status (which can have values 'A' or 'I'):

this.form = this.formBuilder.group({
          result_info: this.formBuilder.array([
            this.getResultcontrols()]),
            status: 'A',
            change_seq: '',
            action: 'C',
        });

I want to map field status to an input of type "checkbox" - (Toggle values are 'A' or 'I'). When I print this.form.value , i expect to see the value of status reflected as 'A' or 'I' , NOT true or false. Can somebody help me with reactive form equivalent of HTML...(not HTML sample based on template driven format)

Can you explain why you don't want to map it yourself? const value = this.form.get('status').value ? 'A' : 'I';? — Silvermind
– Silvermind, Commented Jan 25, 2020 at 15:54
@ Silvermind .....Very true..!!..Too bad for me not to think of simplest aspects..Thanks so much..! — NewbieAngular
– NewbieAngular, Commented Jan 25, 2020 at 16:11

jacopotaba · Accepted Answer · 2020-01-25 16:01:58Z

1

You can retrieve the value like this:

<input type="checkbox" (change)="test($event)"  value="helloworld">

test(event) {
    console.log(event.target.value)
    return event.target.value
}

and then you assign the value of the property status to the result of the function test()

answered Jan 25, 2020 at 16:01

jacopotaba

8610 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eliseo · Accepted Answer · 2020-01-26 14:23:47Z

a FormControl exist you has a input or not. I wrote yet in another answer (but I can not find it). Use a input with [ngModel] and (ngModelChange) to control the value of FormControl

    <input type="checkbox" [ngModel]="form.get('result_info2').value=='A'"
        (ngModelChange)="form.get('result_info2').setValue($event?'A':'B')"
       [ngModelOptions]="{standalone:true}">

If you use mat-checkbox use checked and change

<mat-checkbox [checked]="form.get('result_info').value=='A'"
            (change)="form.get('result_info').setValue($event.checked?'A':'B')">
</mat-checkbox>

In a FormArray it's the same imagine you has a form with a formArray, you defined in your .ts a function taht return the formArray

  get myformArray()
  {
    return this.form.get('formArray') as FormArray
  }

And your form like

<form [formGroup]="form">
    <div formArrayName="formArray">
        <div *ngFor="let group of myformArray.controls;let i=index" [formGroupName]="i">
            <input type="checkbox"  [ngModel]="group.get('status').value=='A'"
            (ngModelChange)="group.get('status').setValue($event?'A':'I')"
           [ngModelOptions]="{standalone:true}">status
            <input formControlName="action">
             </div>
        </div>
</form>

See that you use an input "ngModel" to control the "check" and a input with formControlName to control the name

You can be an example of all this in stackblitz

Collectives™ on Stack Overflow

Angular 8/ Reactive Form - Converting result of checkbox event to a string value

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related