Question

我有此映射用户* ------------------------ 1职业。我想修改一个用户。因此，我从list-users.component.html中选择了一个，我将被重定向到modify-user.component.html。

以下是必需文件：

modify-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>

modify-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);
      });
  }

}

我的问题是，重定向到修改用户后，我通常获得了第一职业（这是错误的），完全像这样描述。 screenshot-error

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

Answer 1

您共享的代码段缺少某些信息，并且包含一些错误。我能够在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中未定义

获取select radio Angular 6的默认值

1 个答案: