angular - 离子 ngModel ngModel 不适用于 Form
问题描述
我有一个简单的形式,我使用 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>
解决方案
您必须在两个页面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>
推荐阅读
- twitter-bootstrap - 如何使用 variable.scss 在引导程序中更改主按钮的颜色?
- python - Jupyter:如何使用 widgets.SelectMultiple() 以交互方式选择要绘制的系列?
- reactjs - 类型“窗口”上不存在属性“setState”
- c# - 我正在尝试读取指纹数据并将其保存到服务器。我在我的项目中包含了参考 zkemkeeper。三个函数中有一个错误
- javascript - 如何有条件地根据多个键对数组进行分组?
- ios - 在swift 4中通过发送“ID”作为参数将数据从一个collectionView单元传递到另一个collection view控制器
- php - 如何删除 Symfony 表单 Collection 的空日期时间条目?(delete_emply 不工作)
- biztalk - 仅为与源模式不同的值在目标模式中创建新记录
- c++ - 绘制文本时 sfml 崩溃
- python - 用熊猫重新采样多列