html - 以角度编辑时未填充下拉菜单和单选按钮表单数组值

Question

在我的表单下拉菜单中，编辑时未填充单选按钮值。我尝试过使用 FormArray。但仍然没有在下拉菜单和单选按钮中获得值。

HTML

            <form [formGroup]="staffRegistrationForm">
                            <mat-label>Role</mat-label>
                            <mat-select formControlName="roleCode" required>
                                <mat-option *ngFor="let item of roleList" [value]="item.roleCode">
                                    <span> {{item.description}}&nbsp;</span>
                                </mat-option>
                            </mat-select>
                            <mat-label>STD/ City Code</mat-label>
                            <mat-select formControlName="homeTelephoneCityCode" required>
                                <mat-option *ngFor="let phoneExt of phoneExtRefList" 
                           [value]="phoneExt.value">
                                    <span>{{phoneExt.name}} &nbsp;</span>
                                </mat-option>
                            </mat-select>

                        <div class="radio-group">
                            <mat-label>Staff ID * &nbsp;&nbsp;</mat-label>
                            <mat-radio-group formControlName="staffId">
                                <mat-radio-button [value]="id" *ngFor="let id of staffIds">
                                    <span> {{id}} &nbsp;</span>
                                </mat-radio-button>
                            </mat-radio-group>
                        </div>
 </form>

我的组件是

 export class StaffRegistrationComponent implements OnInit {
 staffRegistrationObj: StaffRegistrationObj = new StaffRegistrationObj();
 roleList: Array<Role>;
 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) => this.editStaffDetails(staff));}

  private editStaffDetails(staff: StaffRegistrationObj) {
  this.staffRegistrationForm.patchValue({
  staffId: staff.staffId,
  role: staff.role,
  homeTelephoneCityCode: staff.homeTelephoneCityCode,});}

请帮助我如何填充该值。

标签： htmlangulartypescriptangular-forms