Angular FormControl 值设置为 null 内部服务

Question

I have a Reactive Angular form which takes mobile number and some other fields as inputs. Below is the code:

component.html

<form [formGroup]="contactDetailsForm">
  <ngx-intl-tel-input [cssClass]="'ngxIntlInputBorder'" [preferredCountries]="preferredCountries"
          [enableAutoCountrySelect]="false" [enablePlaceholder]="false" [searchCountryFlag]="true"
          [searchCountryField]="[SearchCountryField.Iso2, SearchCountryField.Name]" [selectFirstCountry]="false"
          [selectedCountryISO]="countryCode" [maxLength]="10" [tooltipField]="TooltipLabel.Name"
          [phoneValidation]="false" aria-label="pMobileNo" formControlName="primaryMobile" id="phone"
          (focusout)="validatePrimaryMobile()"></ngx-intl-tel-input>
</form>

component.ts

ngOnInit() {
    this.serviceForm = this.registerService.getContactDetails();
    if(this.serviceForm!=null){
      this.contactDetailsForm = this.serviceForm;
      if(this.serviceForm.get('country').value != 91){
        this.indiaFlag = false;
      }
      return;
    }
    this.contactDetailsForm = new FormGroup({
      primaryMobile: new FormControl('', [Validators.required, Validators.minLength(10)]),
    });
  }

ngOnDestroy(){
    this.registerService.holdContactDetails(this.contactDetailsForm);
  }

component.service

holdContactDetails(contactDetails:FormGroup){
    this.contactDetails=contactDetails;
    console.log('Hold: ', this.contactDetails);
    this.mobile = this.contactDetails.get('primaryMobile').value;
    console.log("Mobil obj: ", this.mobile);
  }

  getContactDetails():FormGroup{
    if(this.contactDetails!=null){
      console.log('this.mobile: ', this.mobile);
      this.contactDetails.controls.primaryMobile.value = this.mobile;
      console.log('get: ', this.contactDetails)
    }
    return this.contactDetails;
  }

When calling the holdContactDetails() , the value of formGroup is updated successfully and i can see the below value of this.mobile on console:

{number: "9958244118", internationalNumber: "+91 99582 44118", nationalNumber: "099582 44118", countryCode: "IN", dialCode: "+91"}

When calling the getContactDetails() function, the value of this.mobile is correctly printed inside the function but in the returned formGroup, the value for primaryMobile is null. Below is the screenshot of the same:

As you can see in the images, when holding, the value for mobile is an object and status is also valid. But on calling get function, the value is updated to null and statu to invalid. Why is this happening?

Update I think I need to be more clear regarding my question. The question here is not how to set the form control value inside service. My question is why do I need to set the value of a form control explicitly when it is already set when I send the formGroup to the service.

Answer 1

Reactive forms are sometimes confusing, the thing is you can not set a value to them using the assign operator (=) and you need to use the two methods from Angular Formgroup: setValue and patchValue The difference between these two is that setValue is for the whole formGroup no matter how many controllers that group has, but in the other hand, patchValue way easier to use. Example of using patchValue:

this.contactDetails.get('primaryMobile').pathValue('123456789');

you can learn more about reactive forms in Angular here: https://link.medium.com/TRvHAhuzB7