具有角反应形式的离子射电组 [英] Ionic radio-group with Angular Reactive Forms

问题描述

我正在 Ionic 中开展一个项目，需要使用 Angular 5 中的反应式形式.我需要允许用户选择语言首选项，我正在使用 radio-group 和 ion-radio 来做这件事，但是当我对表格进行了更改，我收到了

I'm working on a project in Ionic and need to use reactive forms from Angular 5. I need to allow a user to select a language preference and I'm doing that with radio-group and ion-radio, but when I make changes to the form, I'm getting

ERROR Error: There is no FormControl instance attached to form control element with name: 'preferredLanguage'

这是我的表单模板

<ion-header>
  <ion-navbar>
    <ion-title>User Profile</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <form *ngIf="user" [formGroup]="profileForm" (ngSubmit)="saveUser()">
      <ion-item>
        <ion-label>Display Name</ion-label>
        <ion-input type="text" formControlName="displayName"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>First Name</ion-label>
        <ion-input type="text" formControlName="firstName"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Last Name</ion-label>
        <ion-input type="text" formControlName="lastName"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Email</ion-label>
        <ion-input type="text" formControlName="email"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Street</ion-label>
        <ion-input type="text" formControlName="street"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>City</ion-label>
        <ion-input type="text" formControlName="city"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>State</ion-label>
        <ion-input type="text" formControlName="state"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Zip Code</ion-label>
        <ion-input type="text" formControlName="zip"></ion-input>
      </ion-item>
      <ion-list radio-group formControlName="preferredLanguage">
        <ion-list-header>
          Select Preferred Language
        </ion-list-header>
        <ion-item>
          <ion-label>English</ion-label>
          <ion-radio value="en-US"></ion-radio>
        </ion-item>
        <ion-item>
          <ion-label>Spanish</ion-label>
          <ion-radio value="es-US"></ion-radio>
        </ion-item>
      </ion-list>
    <button type="submit" ion-button>Submit Profile</button>
  </form>
</ion-content>

这是我初始化表单的方法

Here is my method that initializes the form

initProfileForm() {
    this.profileForm = this.formBuilder.group({
      displayName: [this.user.profile.displayName, Validators.required],
      firstName: [this.user.profile.firstName, Validators.required],
      lastName: [this.user.profile.lastName, Validators.required],
      email: [this.user.profile.email, Validators.required],
      street: [this.user.profile.street, Validators.required],
      city: [this.user.profile.city, Validators.required],
      state: [this.user.profile.state, Validators.required],
      zip: [this.user.profile.zip, Validators.required] ,
      preferredLanguage: [this.user.profile.preferredLanguage, 
Validators.required]
    });
  }

有没有其他人遇到过这个问题，你是如何解决的?

Has anyone else had this issue and how did you solve it?

推荐答案

我最终想出了一个解决方案.这个博客帮我想出了一个答案:https://robferguson.org/blog/2017/11/19/ionic-3-and-forms/ 显然，radio-group 不适用于 formControlName 所以我最终使用了这个:

I ended up coming up with a solution. This blog helped me come up with an answer: https://robferguson.org/blog/2017/11/19/ionic-3-and-forms/ Apparently, radio-group doesn't work with formControlName so instead I ended up using this:

  <ion-list radio-group [formControl]="profileForm.controls['preferredLanguage']">
    <ion-list-header>
      Select Preferred Language
    </ion-list-header>
    <ion-item>
      <ion-label>English</ion-label>
      <ion-radio value="en-US"></ion-radio>
    </ion-item>
    <ion-item>
      <ion-label>Spanish</ion-label>
      <ion-radio value="es-US"></ion-radio>
    </ion-item>
  </ion-list>

这解决了问题，因此不再有错误.

This fixed the issue so there is no longer an error.

这篇关于具有角反应形式的离子射电组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！