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

Question

我是 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]),
});
}

}

Answer 1

问题是因为您同时使用了 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演示