Angular 5 - reactive form- is there a way to patch value using a variable?

Question

I have a form group with many fields :

    this.addressForm = this.formBuilder.group({
        line1: ['', Validators.required],
        line2: '',
        line3: '',
        line4: '',
        line5: '',
        line6: '',
        line7: '',
        line8: '',
    });

In my html I have a form field to each formControl and a button near it that clears that form control.

                <mat-form-field>
                    <mat-label>line 1</mat-label>
                    <input matInput formControlName="line1" type="text">
                    <button type="button" (click)="clearLine('line1')">
                    </button>
                </mat-form-field>

How Can I write a generic methods that gets the name of the form control and clears it?

I tries this-

clearLine(line) {
    this.addressForm.patchValue({line: ''});
}

but that did not work, because it searched for a formControl name "line".

Is there any way to do this without execute many "if" conditions?

Francisco Santorelli · Accepted Answer · 2019-06-12 08:19:35Z

19

try this

clearLine(line) {
    this.addressForm.patchValue({[line]: ''}); // added []
}

answered Jun 12, 2019 at 8:19

Francisco Santorelli

1,3489 silver badges13 bronze badges

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

1 Comment

Francisco Santorelli Over a year ago

no prob!... adding brackets will make the access substitute variables names. Just like object['hey'] equals object.hey. Happy coding!

Collectives™ on Stack Overflow

Angular 5 - reactive form- is there a way to patch value using a variable?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related