gpt4 book ai didi

angular - 无法绑定(bind)到 'ngModelOptions',因为它不是 'ion-input' 的已知属性

转载 作者:行者123 更新时间:2023-12-01 22:05:46 25 4
gpt4 key购买 nike

我是 ionic 和 angular 的新手。有人可以告诉我如何在 formgroup 中使用 ngmodel 以便我可以获取数据。有没有其他方法可以做到这一点。我在谷歌搜索了一些答案,但我没有真正找到答案这是我的 .html

<ion-slides #signupSlider>
<ion-slide>
<ion-list>
<form novalidate [formGroup]="slideOneForm">
<ion-item>
<ion-label color="white" fixed>First Name:</ion-label>
<ion-input type="text" placeholder="Enter your First Name" formControlName="fname" [(ngModel)]="userData.fname" [ngModelOptions]="{standalone: true}"></ion-input>
</ion-item>
</form>
</ion-list>
</ion-slide>
<ion-slide>
<ion-list>
<form novalidate (ngSubmit)="signup()" [formGroup]="slideTwoForm">
<ion-item>
<ion-label color="white" fixed>Address:</ion-label>
<ion-textarea placeholder="Enter your Address" rows="3" formControlName="address" [(ngModel)]="userData.address"></ion-textarea>
</ion-item>
</form>
</ion-list>
<button ion-button round (click)="signup()" [disabled]="slideTwoForm.invalid">Signup</button>
</ion-slide>
</ion-slides>

这是 mt .ts 文件

import { Component,OnInit,ViewChild } from '@angular/core';
import { ToastController,LoadingController } from 'ionic-angular';
import { FormControl, FormGroup, Validators, AbstractControl, ValidatorFn }
from '@angular/forms';

import { AuthServiceProvider } from '../../providers/auth-service/auth-
service';
import { LoginPage } from '../login/login';

@Component({
selector: 'page-signup',
templateUrl: 'signup.html',
})
export class SignupPage {
responseData : any;
slideOneForm: FormGroup;
slideTwoForm: FormGroup;
userData = { "fname": "", "address": "" };

@ViewChild('signupSlider') signupSlider: any;

constructor(
private authService: AuthServiceProvider,
public toastCtrl: ToastController,
public loadingCtrl: LoadingController) {
}

ionViewDidLoad() {
this.signupSlider.lockSwipes(true);
}
ngOnInit(){
this.slideOneForm = new FormGroup({
fname: new FormControl('', [Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required]),
});
this.slideTwoForm = new FormGroup({
address: new FormControl('', [Validators.pattern('[a-zA-Z ]*'), Validators.required]),
});
}

}

最佳答案

问题是因为您同时使用了 formControlName 和 ngModelOptions,

如果你想在同一个输入上使用两者,那么将 formControlName 设为小写,

这里有一个变化,

<ion-list>
<form novalidate [formGroup]="slideOneForm">
<ion-item>
<ion-label color="white" fixed>First Name:</ion-label>
<ion-input type="text" placeholder="Enter your First Name" formcontrolName="fname" [(ngModel)]="userData.fname" [ngModelOptions]="{standalone: true}"></ion-input>
</ion-item>
</form>

Stackblitz演示

关于angular - 无法绑定(bind)到 'ngModelOptions',因为它不是 'ion-input' 的已知属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52153785/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com