Question

我有一个简单的形式，即使用ngModel来获取ion-select option的值。但是问题是当我使用ngmodel时显示此错误

“ ngModel不能用于通过父formGroup指令注册表单控件。尝试使用 formGroup的伙伴指令“ formControlName”代替。”

HTML看起来像这样

<ion-content scrollY="false" fullscreen="true">
  <ion-grid>
    <form [formGroup]="profileForm" (keydown)="onKeyDownFunction($event)">

    <ion-slides #slides>
        <ion-slide>
             <div>
              <!-- Form Inputs -->
              <app-text-input placeholder="{{ 'form.placeholders.first_name' | translate }}" clearInput
                [formControl]="firstName" text-capitalize ></app-text-input>
              <app-label *ngIf="hasError && (firstName.hasError('required') || !firstName.valid)" class="shake" color="light"
                [width]="size.width(90)" [marginLeft]="size.width(5)" >{{
                'form.errors.first_name' | translate }}</app-label>

              <app-text-input placeholder="{{ 'form.placeholders.last_name' | translate }}" clearInput
                [formControl]="lastName" text-capitalize ></app-text-input>
              <app-label *ngIf="hasError && (lastName.hasError('required') || !lastName.valid)" class="shake" color="light"
                [width]="size.width(90)" [marginLeft]="size.width(5)" >{{
                'form.errors.last_name' | translate }}</app-label>

              <app-text-input placeholder="{{ 'form.placeholders.username' | translate }}" clearInput [formControl]="username"
                ></app-text-input>
              <app-label *ngIf="hasError && (username.hasError('required') || !username.valid)" class="shake" color="light"
                [width]="size.width(90)" [marginLeft]="size.width(5)" >{{
                'form.errors.username_invalid' | translate }}</app-label>
              <app-label *ngIf="hasError && usernameTaken" class="shake" color="light" [width]="size.width(90)"
                [marginLeft]="size.width(5)">{{
                'form.errors.username_taken' | translate }}</app-label>
                <app-button color="gold" text-uppercase (click)="next(slides)" class="your-class">Next</app-button>
              </div>
        </ion-slide>

        <ion-slide>
             <div>
                 <ion-item>
                    <ion-label>Select Location</ion-label>
                    <ion-select  okText="Okay" cancelText="Dismiss" [(ngModel)]="select">
                      <ion-select-option value="brown">Location 1</ion-select-option>
                      <ion-select-option value="blonde">Location 2</ion-select-option>
                      <ion-select-option value="black">Location 3</ion-select-option>
                      <ion-select-option value="red">Location 4</ion-select-option>
                    </ion-select>
                  </ion-item>
                  <app-button class="your-class" color="gold" text-uppercase (click)="next(slides)" margin-bottom>Next</app-button>
              </div>
        </ion-slide>

        <ion-slide>
               <ion-list>
                  <ion-radio-group>
                    <ion-list-header>
                      <ion-label>Select User Type</ion-label>
                    </ion-list-header>

                    <ion-item>
                      <ion-label>User</ion-label>
                      <ion-radio slot="start" value="biff" ></ion-radio>
                    </ion-item>

                    <ion-item>
                      <ion-label>Admin</ion-label>
                      <ion-radio slot="start" value="griff"></ion-radio>
                    </ion-item>
                  </ion-radio-group>
                  <!-- Create Profile -->
        <app-button color="gold" text-uppercase (click)="onCreateFunction($event)" class="your-class">{{
          'create_profile.buttons.create_profile' | translate }}</app-button>
                </ion-list>

        </ion-slide>
      </ion-slides>


      </ion-row>
    </form>
  </ion-grid>
</ion-content>

Answer 1

您必须在app.module.ts和page.module.ts页面中导入以下文件。

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

也在@Ngmodules导入中导入ReactiveFormsModule。

在 pagename.page.ts

中

    import { FormBuilder, Validators } from '@angular/forms';
    constructor(
    private fb: FormBuilder
    )
    loginForm = this.fb.group({
        user_email: ['', Validators.compose([Validators.required])],
        user_password: ['']
                             });
  login() {
        console.log(this.loginForm.value);
          }

在 Pagename.page.html

中

 <form [formGroup]="loginForm">
      <div class="row">
          <ion-input formControlName="user_email" placeholder="Email" type="text"></ion-input>
      </div>
      <div class="row">
          <ion-input formControlName="user_password" placeholder="Password" type="password"></ion-input>
      </div>
</form>

Answer 2

由于您使用的是反应形式，因此无法使用[(ngModel)]。但是，等等，这并不意味着我们无法覆盖它。

只需添加另一个属性[ngModelOptions]="{standalone: true}"和[(ngModel)]。

注意：没有[ngModelOptions]="{standalone: true}"的{{1}}会引发错误。两者齐头并进

ionic ngModel ngModel无法与Form

2 个答案: