How to keep default value in reactive input

Question

I am making a reactive form which is filled with default values from my DB. So the user is free to modify some data and then send back the form. But if he chooses to not change some fields, I want to be able to get the default values when the form is sent. But I get an undefined error when I try to display the values of such fields.

I tried putting the default value directly in the formControl as it is created, display the value in a [value] attribute in the template.

I can't show you exactly what I am working on, as it's again my company's policy, but here's a pseudocode

 form_control: new FormControl({ value: myValue, disabled: false }, [Validators.required]);

in template:

<input matInput placeholder="myPlaceHolder" formControlName="form_control" id="form">

I expect to see in my input my default value, and to be able to get this value even if I have not touched that field. Nothing shows in the input, and I get an undefined message when I try to display the value of the input in the console.

Thank you for helping me!

you should make a stackblitz or something, the code here is a little verbose but works fine — bryan60
– bryan60, Commented Aug 8, 2019 at 15:34
I supouse your problem is that you create the form in ngOnInit, and Angular give an error. if it is, you can use an *ngIf to avoid initials errors. e.g. if your form is called myForm, write :<form *ngIf="myForm" [formGroup]="myForm">....</form> — Eliseo
– Eliseo, Commented Aug 8, 2019 at 15:55

R. Franklin · Accepted Answer · 2019-08-08 16:36:35Z

6

You could set your form control to an empty string and then use setValue() or patchValue() to set the value of your inputs. If the user wants to edit the defaults, they can. The inputs that they don't edit will still be passed into the form

sampleForm= new FormGroup({
    firstName: new FormControl('', Validators.required),
    lastName: new FormControl('', Validators.required),
});


this.sampleForm.patchValue({
    firstName: this.sample.firstName,
    lastName: this.sample.lastName,
});

answered Aug 8, 2019 at 16:36

R. Franklin

613 bronze badges

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

1 Comment

n.Dr Over a year ago

Hey! Thank you for your solution, it works now! Thank you that's all I needed to finish this :D

Srishti Khandelwal · Accepted Answer · 2019-08-09 05:41:03Z

1

You can use formBuilderConfig.propsConfig of @rxweb/reactive-form-validators to dynamically set the default value of the formControl. By using this, you will also be able to get the default value even if you didn't touched that field.

You just have to import RxFormBuilder and FormBuilderConfiguration.

import { RxFormBuilder,FormBuilderConfiguration } from '@rxweb/reactive-form-validators';

Then set propsConfig like this:

ngOnInit() {
      let user = new User();

       var formBuilderConfig = new FormBuilderConfiguration();
        formBuilderConfig.propsConfig = {'emailAddress':{defaultValue:"[email protected]"}}
         this.userFormGroup = this.formBuilder.formGroup(user,formBuilderConfig);
    }

Working Stackblitz

answered Aug 9, 2019 at 5:41

Srishti Khandelwal

5774 silver badges14 bronze badges

1 Comment

n.Dr Over a year ago

Thank you for your solution! I managed to solve my problem thanks to you all! I'll keep that in mind, I may need it!

Shashank Sharma · Accepted Answer · 2019-08-13 12:39:50Z

0

You can use YourForm.setValue() (if you want to change value of one or less controls); or patchValue() (if you want to change value of n numbers of controls and you don't want anything will break if some control turns to undefined) in your ngOnInIt so that values will be assigned at the time of initialisation.

Note: It's better to use patchValue if you are dealing with multiple formControls.

answered Aug 13, 2019 at 12:39

Shashank Sharma

416 bronze badges

Comments

Sagar Bhivara · Accepted Answer · 2023-09-29 08:14:03Z

0

The simplest way you can do this is by patching value into the form inputs directly when you obtain the default data from DB. To do this, inside where you receive your DB data add the following code for each input.

this.formName.get('input_name').patchValue(value from DB Here);

this should work fine

answered Sep 29, 2023 at 8:14

Sagar Bhivara

415 bronze badges

Collectives™ on Stack Overflow

How to keep default value in reactive input

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related