获取选择单选角6的默认值(Get the default value of select radio

我有这个映射用户* ------------------------ 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:

代码片段您分享缺少一些信息，并包含一些错误。 我能够重新创建它stackblitz ，希望它抓住了你想要的目的。

当与角的形式工作，不建议混合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

文章来源: Get the default value of select radio Angular 6