获取选择单选Angular 6的默认值

Question

我有这个映射用户 *------------1 个职业。 我想修改一位用户。 所以我从list-users.component.html中选择一个，我会被重定向到modify-user.component.html。

以下是所需文件：

修改-user.component.html

<form [formGroup]="editForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" formControlName="name" placeholder="Name" name="name" class="form-control" id="name">
        </div>
        <div *ngFor='let pro of professions; let i = index'>
            <label>
                <input type="radio"
                       id="pro.id" 
                       checked="pro.selected" 
                       name="pro"
                       [(ngModel)]="this.editForm.pro"
                       (change)='radioChecked(pro.id, i)'
                       [value]="pro.libelle">
                <span></span>
                <span class="check"></span>
                <span class="box"></span>
                {{pro.libelle}}
            </label>
        </div>
        <p>==> {{selectedProfessionRadio}}</p>
        <button class="btn btn-success">Update</button>
    </form>

修改-user.component.ts

export class ModifyUserComponent implements OnInit
{

    private selectedProfessionRadio;
    professionLib: string;
    editForm: FormGroup;
    usrId: String;

    professions: Profession[] =
    [
        {id: 1, libelle: "Engineer", selected: false},
        {id: 2, libelle: "Student", selected: false},
    ];

    radioChecked(id, i, pro)
    {
        this.professions.forEach(pro=>
        {
            if(pro.id !== id)
            {
                pro.selected = false;
            }
            else
            {
                pro.selected = true;
            }
        })

        this.userService.getProfessionById(id).subscribe(data =>
        {
            console.log(data);
            pro = data as Profession;

            localStorage.removeItem("ProfessionLibelle");
            localStorage.setItem("ProfessionLibelle", pro.libelle);

        },error => console.log(error));

        this.selectedProfessionRadio = localStorage.getItem("ProfessionLibelle");
    }

  constructor(private formBuilder: FormBuilder, private router: Router, private userService: UserService) {}

  ngOnInit()
  {
      let userId = localStorage.getItem("editUserId");
      this.usrId = localStorage.getItem("editUserId");

      this.userService.getProfessionLibelleByIdUser(+userId).subscribe(data =>
      {
          console.log(data);
          let pro = data as string;
          this.professionLib = pro;

          localStorage.removeItem("ProfessionLibe");
          localStorage.setItem("ProfessionLibe", this.professionLib);

      },error => console.log(error));

      this.selectedProfessionRadio = localStorage.getItem("ProfessionLibe");

      this.editForm = this.formBuilder.group
      ({
          id: [],
          name: ['', Validators.required],
          pro: [this.selectedProfessionRadio, Validators.required]
      });

      this.userService.getUserId(+userId).subscribe( data =>
      {
          this.editForm.patchValue(data);
      });
  }

}

我的问题是，在重定向到修改用户后，我通常得到第一个职业（这是错误的），就像这里描述的那样。

你能告诉我我错过了什么吗？ 非常感谢。

Answer 1

您分享的代码 sn-p 缺少一些信息并包含一些错误。我能够在 stackblitz 上重新创建它，希望它能够捕捉到您想要实现的目标。

在 Angular 中处理表单时，不建议混合使用 template driven forms 和 reactive forms。在您的情况下，这导致了错误：

ngModel cannot be used to register form controls with a parent formGroup directive. Try using
formGroup's partner directive "formControlName" instead 

另外，editForm.item 会导致错误，因为item 没有在表单组editForm 中定义