Ionic 角React型离子放射性基团

mhd8tkvw 于 2023-05-11 发布在 Ionic

关注(0)|答案(4)|浏览(170)

我正在使用Ionic开发一个项目，需要使用Angular 5的响应式表单。我需要允许用户选择语言首选项，我正在使用radio-group和ion-radio来实现这一点，但是当我更改表单时，我会得到

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>

下面是我的初始化表单的方法

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

其他人有这个问题吗？你是如何解决的？

ionic-framework

来源：https://stackoverflow.com/questions/47948838/ionic-radio-group-with-angular-reactive-forms

4条答案

按热度按时间

rekjcdws1#

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

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

这修复了问题，因此不再出现错误。

赞(0）回复(0）举报 2023-05-11

nnt7mjpx2#

在HTML代码中做一些修改：

<ion-item>
      <ion-label>English</ion-label>
      <ion-radio value="en-US" formControlName="preferredLanguage"></ion-radio>
    </ion-item>
    <ion-item>
      <ion-label>Spanish</ion-label>
      <ion-radio value="es-US" formControlName="preferredLanguage"></ion-radio>
    </ion-item>

因此，基本上，而不是使用它的父使用它单独为每个单选按钮。这对我很有效。
希望有帮助！

赞(0）回复(0）举报 2023-05-11

iyr7buue3#

get preferredLanguage() {
  return this.profileForm.get('preferredLanguage').value;
}

set preferredLanguage(ev: CustomEvent) {
  this.profileForm.get('preferredLanguage').patchValue(ev.detail.value);
}

<ion-radio-group [value]="preferredLanguage" (ionChange)="preferredLanguage = $event">
  <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-radio-group>

赞(0）回复(0）举报 2023-05-11

34gzjxbg4#

答案对我不起作用，我不得不恢复使用[（ngModel）]并手动设置项。建议移动到离子列表或离子行似乎使情况更糟，而不是更好。这是Ionic 4。

<ion-radio-group [(ngModel)]="controlValue" ngDefaultControl [ngModelOptions]="{standalone: true}" (ionChange)="setControlValue($event)">

声明模型变量：

eventId: string = '';

如果需要，在初始化中设置它。更改时，设置表单控件：

setControlValue($event){
    this.myForm.controls['controlValue'].setValue($event?.detail?.value);
  }

在表单上需要ngDefaultControl，否则您将得到表单问题，并且模型选项指示您希望使用传统的ngModel方法，并且不发出错误，您正在混合两种表单。

赞(0）回复(0）举报 2023-05-11

我来回答

Ionic 角React型离子放射性基团

4条答案

相关问题

热门标签

最新问答