Unable to use patchValue with select value bind to object

Question

I am using a angular form builder to add data where the form have a select element who's value is Bind to object, but when i am trying to edit the form using patch value method or set value method field except the select are getting filed with correct data, please can some one correct me.

html

  <form [formGroup]="addCountryForm">
    <div class="form-group">
      <label for="countryControl">Name</label>
      <select class="form-control" formControlName="countryControl" (change)="resetwarning()">        
        <option [ngValue]="country" *ngFor="let country of countries">
          {{country.name}}
        </option>
      </select>          
    </div>
    <div class="form-group">
      <label for="note">Note</label>
      <textarea rows="4" class="form-control" placeholder="Enter any Note (If Any)" formControlName="note"></textarea>          
    </div>
  </form>

ts

export class AddCountryComponent implements OnInit {

  addCountryForm: FormGroup;

  data: any;
  heading: string;
  countries = [];
  customeError: boolean;
  customeErrorMsg: string;

  constructor(
    public activeModal: NgbActiveModal,
    private fb: FormBuilder,
    private countryService: CountriesService
  ) { }

  ngOnInit() {
    this.countries = this.countryService.allCountryList();
    this.createForms();
    if (this.data) {
      console.log(this.data.details);
      this.addCountryForm.setValue({
        countryControl: this.data.details,
        note: this.data.note
      }
      );
      this.heading = 'Edit Country';
    } else {
      this.heading = 'Add Country';
    }
  }

  createForms() {
    this.addCountryForm = this.fb.group({
      countryControl: [''],
      note: ['', [Validators.required]]
    });
  }   

}

{{countries|json}}

Example Output

[
  {
    "id": "1",
    "sortname": "AF",
    "name": "Afghanistan",
    "phonecode": "93"
  },
  {
    "id": "2",
    "sortname": "AL",
    "name": "Albania",
    "phonecode": "355"
  },
  {
    "id": "3",
    "sortname": "DZ",
    "name": "Algeria",
    "phonecode": "213"
  }
 ]

and

console.log(this.data.details);

Output

 {id: "1", sortname: "AF", name: "Afghanistan", phonecode: "93"}

Answer 1

I figured out one solution which is working for me, What was the problem: I was trying to do patch value and set value for a drop down having value in json object array so it is comparing to object for setting selected value i did following:

ngOnInit() {
this.countries = this.countryService.allCountryList();
this.createForms();
if (this.data) {
  const selectedCountry = this.countries.find(item => JSON.stringify(item) === JSON.stringify(this.data.details));
  this.addCountryForm.patchValue({
    countryControl: selectedCountry,
    note: this.data.note
  }
  );
  this.heading = 'Edit Country';
} else {
  this.heading = 'Add Country';
}

}