I have a simple form in which im useing ngModel to get the value of ion-select option . But the problem is when i using ngmodel its showing this error
"ngModel cannot be used to register form controls with a parent formGroup directive. Try using formGroup's partner directive "formControlName" instead."
Html look like this
<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>
ngModel
with reactive forms in Angular. UseformControlName
instead. – R. Richards