Angular reactive forms patchValue or setValue not working - Angular 10

0
votes

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

enter image description here

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>

enter image description here

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

Any help is much appreciated.

Thanks in advance!

2
javascriptangulartypescriptangular-reactive-formsangular10
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
@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
Can you console log res property? - Owen Kelvin
@OwenKelvin please check, I have edited with what's required more - Akki

2 Answers

1
votes

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

1
votes

First Error

The problem is that the value of response.addresss 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: address: response.addresss, to

 address: response.addresss ?  address: response.addresss: '',

We are simply check 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