Question

ts代码：

导入了所有必需的组件。

constructor(public platform: Platform, public formBuilder: FormBuilder,public navCtrl: NavController public http: Http) {
this.loginForm = new FormGroup({
  userName: new FormControl('', Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(16)])),
  password: new FormControl('', Validators.compose([Validators.required, Validators.minLength(6), Validators.maxLength(16)]))
  enableTouchId: new FormControl(false, [])
});
}

在Html中：

<form [formGroup]="loginForm" name="loginForm" (ngSubmit)="login(loginForm)">
  <ion-row>
    <ion-col>
      <ion-list no-lines>
        <ion-item class="member-item">
          <ion-input type="text" placeholder="Username"  [readonly]="isReadOnly()" formControlName="userName" name="userName" [(ngModel)]="userName" minlength="5" maxlength="16" required></ion-input>
          <ion-icon ios="ios-person" md="md-person" item-left></ion-icon>
        </ion-item>
      </ion-list>
    </ion-col>
</ion-row>
</form>

我已经验证/测试了stackoverflow退出解决方案，但没有运气。

Answer 1

如果你使用带有验证的FormBuilder，你不需要在你的html上重复它们，你需要识别输入的所有内容都是formControlName="userName"，所以你的html应该是这样的：

<form [formGroup]="loginForm" name="loginForm" (ngSubmit)="login()">
  <ion-row>
    <ion-col>
      <ion-list no-lines>
        <ion-item class="member-item">
          <ion-input type="text" placeholder="Username" [readonly]="isReadOnly()" formControlName="userName"></ion-input>
          <ion-icon ios="ios-person" md="md-person" item-left></ion-icon>
        </ion-item>
      </ion-list>
    </ion-col>
</ion-row>
</form>

然后在login()上使用this.loginForm来处理表单。

angular2中的username maxlength validation不适用于samsung设备。使用数字数据正常工作但不使用字母数字

1 个答案: