ionic ngModel ngModel не работает с формой

Question

У меня есть простая форма, в которой я использую ngModel, чтобы получить значение параметра ion-select. Но проблема в том, что когда я использую 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';

Импортировать ReactiveFormsModule также в импорте @Ngmodules.

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

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