title: dropdown and radio button form array value is not populating while editing in angular
body: <p>In my form dropdown and radio button value is not populating while editing. I have tried using FormArray. But is still not getting the value in the dropdown and radio button.  </p>
  
  <p>HTML</p>
  
  <pre><code>            &lt;form [formGroup]="staffRegistrationForm"&gt;
                              &lt;mat-label&gt;Role&lt;/mat-label&gt;
                              &lt;mat-select formControlName="roleCode" required&gt;
                                  &lt;mat-option *ngFor="let item of roleList" [value]="item.roleCode"&gt;
                                      &lt;span&gt; {{item.description}}&amp;nbsp;&lt;/span&gt;
                                  &lt;/mat-option&gt;
                              &lt;/mat-select&gt;
                              &lt;mat-label&gt;STD/ City Code&lt;/mat-label&gt;
                              &lt;mat-select formControlName="homeTelephoneCityCode" required&gt;
                                  &lt;mat-option *ngFor="let phoneExt of phoneExtRefList" 
                             [value]="phoneExt.value"&gt;
                                      &lt;span&gt;{{phoneExt.name}} &amp;nbsp;&lt;/span&gt;
                                  &lt;/mat-option&gt;
                              &lt;/mat-select&gt;
  
                          &lt;div class="radio-group"&gt;
                              &lt;mat-label&gt;Staff ID * &amp;nbsp;&amp;nbsp;&lt;/mat-label&gt;
                              &lt;mat-radio-group formControlName="staffId"&gt;
                                  &lt;mat-radio-button [value]="id" *ngFor="let id of staffIds"&gt;
                                      &lt;span&gt; {{id}} &amp;nbsp;&lt;/span&gt;
                                  &lt;/mat-radio-button&gt;
                              &lt;/mat-radio-group&gt;
                          &lt;/div&gt;
   &lt;/form&gt;
  </code></pre>
  
  <p>My component is </p>
  
  <pre><code> export class StaffRegistrationComponent implements OnInit {
   staffRegistrationObj: StaffRegistrationObj = new StaffRegistrationObj();
   roleList: Array&lt;Role&gt;;
   phoneExtRefList = PHONE_EXT_LIST;
   staffRegistrationForm: FormGroup;
   submitted = false;
   staffIds = [];
   edit = false;
  
  constructor(
  private formBuilder: FormBuilder,
  private staffService: StaffService,
  ) {
  this.staffRegistrationForm = this.formBuilder.group({
    staffId: [null, [Validators.required]],
    role: this.formBuilder.group({[]}),
    homeTelephoneCityCode: [null, [Validators.required]],
  });
  this.staffIds = ['Email', 'Mobile'];
  const id = this.activatedRoute.snapshot.paramMap.get('id');
  if (id !== null) {
    this.getStaffDetails(id);}}}  
  
  onSave() {
   private getStaffDetails(id: string) {
    this.staffService.getStaffDetails(id).subscribe(
    (staff: StaffRegistrationObj) =&gt; this.editStaffDetails(staff));}
  
    private editStaffDetails(staff: StaffRegistrationObj) {
    this.staffRegistrationForm.patchValue({
    staffId: staff.staffId,
    role: staff.role,
    homeTelephoneCityCode: staff.homeTelephoneCityCode,});}
  </code></pre>
  
  <p>Please help me how to populate the value. </p>