获取select radio Angular 6的默认值 [英] Get the default value of select radio Angular 6

问题描述

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

I have this mapping User *------------------------1 Profession. I'd like to modify one user. So I select one from list-users.component.html, I'll be redirected to 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);
      });
  }

}

我的问题是，重定向到修改用户后，我通常获得了第一职业(这是错误的)，完全像此描述的那样.

My problem is that after redirecting to modify-user, I got usually the first profession (which is wrong), exactly like described by this.

您能告诉我我错过了什么吗?非常感谢.

Could you please tell me what I missed? Thanks a lot.

推荐答案

您共享的代码段缺少某些信息，并且包含一些错误.我能够在 stackblitz 上重新创建它，希望它能捕捉到您正在尝试执行的操作实现.

The code snippet you share lack some information and contains some errors. I was able to recreate it on stackblitz, hope it captures was you're trying to achieve.

在Angular中使用表单时，建议不要混合使用模板驱动的表单和反应性表单.在您的情况下，这会导致错误:

When working with forms in Angular, it is not recommended to mix template driven forms and reactive forms. In your case, this resulted in the error:

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

此外，由于未在表单组 editForm

Also, editForm.item will result in an error, because item is not defined in the form group editForm

这篇关于获取select radio Angular 6的默认值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！