Angular reactive forms patchValue or setValue not working - Angular 10

Question

I am using Reactive forms, everything's good but when I am patching values, they are not updated. I tried patchValue and setValue as well, but nothing seems to work. Below is my code

    ngOnInit(){
    this.profileForm = this.fb.group({
          'name': ['', Validators.required],
          'email': ['', [Validators.required, Validators.email]],
          'phNumber': ['', Validators.required],
          'gender': ['', Validators.required],
          'address': ['', Validators.required],
          'city': ['', Validators.required],
          'state': ['', Validators.required],
          'pincode': ['', Validators.required]
        });
    }

Patching value

    let response = res['expert'];
          this.profileForm.setValue({
            name: response.full_name,
            email: response.expert_email,
            phNumber: response.expert_mobile,
            address: response.addresss,
            city: response.city,
            state: response.state,
            pincode: response.pincode,
            gender: response.id_gender
          });

getting this error if I use setValue

Form values are getting set if I use patchValue,

    after = {"name":"Test Name","email":"[email protected]","phNumber":"9632587410","gender":1,"city":"Adilabad","state":"ANDHRA PRADESH","pincode":"2352"}

    <section class="marginBoxModelForProfile">
        <form [formGroup]="profileForm">
            <h6 class="text-left circularBold"><b>Complete Profile Details</b></h6>
            <p class="text-left circularBold grey5F font-size14">Min 300 Rs. Explanation about how they can choose and
                why they should choose the right fields. A link and details on how to join will be included in your
                booking confirmation email.</p>
            <input type="text" class="education-inputs w-100 mt-3" placeholder="Name" formControlName="name"
                [ngClass]="{'input-error': submitted && profileForm.controls.name.invalid}">
            <div class="mt-3 text-left">
                <!-- <ng-container *ngFor="let gender of genders">
                    <input type="radio" name="gender" id="gender" class="mr-1" value="">
                    <span class="mr-5" formControlName="gender">
                        {{gender.gender_name}}
                    </span>
                </ng-container> -->
                <input type="radio" name="gender" id="gender" class="mr-1" [value]="1" (change)="onChangeGender($event)"> <span class="mr-5"
                    formControlName="gender">Male</span>
                <input type="radio" name="gender" id="gender" class="mr-1" [value]="2" (change)="onChangeGender($event)"> <span class="mr-5"
                    formControlName="gender">Female</span>
                <input type="radio" name="gender" id="gender" class="mr-1" [value]="3" (change)="onChangeGender($event)"> <span class="mr-5"
                    formControlName="gender">Other</span>
            </div>
            <div class="input-group mt-3">
                <div class="input-group-prepend">
                    <span class="input-group-text contactNumber-addon" id="basic-addon1"
                    [ngClass]="{'input-error': submitted && profileForm.controls.phNumber.invalid}">+91</span>
                </div>
                <input type="text" class="form-control contactnumber-input" placeholder="Contact Number"
                    aria-label="contactNumber" aria-describedby="basic-addon1" formControlName="phNumber"
                    [ngClass]="{'input-error': submitted && profileForm.controls.phNumber.invalid}">
            </div>
            <input type="email" class="education-inputs w-100 mt-3" placeholder="Email" formControlName="email"
                [ngClass]="{'input-error': submitted && profileForm.controls.email.invalid}">
            <input type="text" class="education-inputs w-100 mt-3" placeholder="Address" formControlName="address"
                [ngClass]="{'input-error': submitted && profileForm.controls.address.invalid}">
            <p class="font-size12 grey8E circularBook text-left mt-2">We use this detail to generate invoices and use it
                for tax purposes.</p>
            <div>
                <input type="text" class="education-inputs w-100 mt-3" placeholder="Pincode" formControlName="pincode"
                    [ngClass]="{'input-error': submitted && profileForm.controls.pincode.invalid}"
                    (change)="onChangePincode($event)">
            </div>
            <div class="text-left">
                <select name="city" id="city" class="education-inputs mt-3 mr-1 w-50" formControlName="city"
                    [ngClass]="{'input-error': submitted && profileForm.controls.city.invalid}">
                    <option value="{{city}}">{{city}}</option>
                </select>
                <select name="state" id="state" class="education-inputs mt-3 state-dropdown" formControlName="state"
                    [ngClass]="{'input-error': submitted && profileForm.controls.state.invalid}">
                    <option value="{{state}}">{{state}}</option>
                </select>
            </div>
            </div>
        </form>
    </section>

I have used patchValue also, please help what I'm doing wrong. I am using v10.

Any help is much appreciated.

Thanks in advance!

Unfortunately with the info you have shared, it is not possible to help, Are their any errors? Is the Object being set? are you calling the function to patch the values? It is not possible to tell — Owen Kelvin
– Owen Kelvin, Commented Nov 4, 2020 at 18:11
@OwenKelvin oh sorry for that, there are no errors, when I console.log the form the values are assigned but I cannot see the values in the UI — Akki
– Akki, Commented Nov 4, 2020 at 18:20
@OwenKelvin please check, I have edited with what's required more — Akki
– Akki, Commented Nov 5, 2020 at 3:48

Joshua Michael Calafell · Accepted Answer · 2022-04-12 15:32:23Z

1

First Error

The problem is that the value of response.address is undefined

As you have stated you can simply use patchValue() to set all the defined values and that should work fine

If you need to use setValue for any reason then you can change the line address: response.address, to

 address: response.address ?? '',

We are simply checking if the value of address exists and if not set it to ''

Second Error

Consider below code

 <input type="radio" name="gender" id="gender" class="mr-1" value="">
    <span class="mr-5" formControlName="gender">{{gender.gender_name}}</span>

As the error states span element does not have a ValueAccessor Just move the formControlName="gender" attribute to the input tag

 <input  formControlName="gender" type="radio" id="gender" class="mr-1" [value]="gender.value">
    <span class="mr-5">{{gender.gender_name}}</span>

See this Solution

Third non-error issue

I see you using the following:

(change)="onChangePincode($event)"

You can subscribe to the form if you're using reactive forms and handle this without using (change) directly in the html. It has a formControlName, so i f you subscribe to the form changes, you can do away with this in your html.

edited Apr 12, 2022 at 15:32

Joshua Michael Calafell

3,1371 gold badge39 silver badges47 bronze badges

answered Nov 5, 2020 at 3:56

Owen Kelvin

15.2k11 gold badges51 silver badges86 bronze badges

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

10 Comments

Akki Over a year ago

yeah with patchValue also, it's actually not working

Akki Over a year ago

yeah I have edited with the error image please check but I think that's not an issue

Owen Kelvin Over a year ago

The problem is in the html, Please share your html

Akki Over a year ago

when using [value]="1" for gender it's not working as expected like it's not getting checked on change and also value is displaying as "on", why is that?

Owen Kelvin Over a year ago

Are you able to reproduce this behaviour?

|

suresh j · Accepted Answer · 2020-11-08 03:44:49Z

1

patchvalue and setvalue method are used to bind the values in the controls.

if you get the response the all form control value,you will use the setValue method.otherwise you will the patchvalue method

answered Nov 8, 2020 at 3:44

suresh j

593 bronze badges

Collectives™ on Stack Overflow

Angular reactive forms patchValue or setValue not working - Angular 10

2 Answers 2

First Error

Second Error

Third non-error issue

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

First Error

Second Error

Third non-error issue

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related