ionic 4 + angular 7 Reactive Form with Validators HTML 呈现问题

Question

我是 ionic 和 angular 的新手，我正在尝试通过教程学习。

按照有关如何使用 Reactive Forms 制作登录表单的教程，我面临以下问题：当我为 FormControl（输入框）声明验证器时FormBuilder，前端显示一个 javascript 函数呈现在文本框内（代替显示占位符文本）。

下面是控制器代码、视图、我的环境配置以及我在 GUI 上获得的内容。可能是 version/dependencies 问题？
如何在不破坏所有内容的情况下修复或更新依赖项版本？
或者只是我发现了一个框架错误？

非常感谢。

亲切的问候。

控制器代码：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
  loginForm: FormGroup;

  constructor(public formBuilder: FormBuilder) {
    this.loginForm = formBuilder.group({
      email: new FormControl(Validators.required),
      password: new FormControl(Validators.compose([
         // no code here and it works fine, if I add a validator it breaks
      ]))
    });
  }

  ngOnInit() {
  }

  login() {
    console.log('email: ' + this.loginForm.value.email);
    console.log('password: ' + this.loginForm.value.password);
  }
}

查看代码：

<ion-header>
    <ion-toolbar>
      <ion-title>login</ion-title>
    </ion-toolbar>
</ion-header>
  
<ion-content padding>

  <form [formGroup]='loginForm'>

    <ion-input class="form-control" formControlName="email" type="text" ></ion-input>

    <ion-input formControlName="password" type="password" ></ion-input>
  
    <ion-button (click)="login()" size="large" expand="block">Login</ion-button>
  
    <ion-button size="large" expand="block" router-direction="forward">Register</ion-button>

  </form>

</ion-content>

离子信息：

Ionic:

   ionic (Ionic CLI)             : 4.10.2
   Ionic Framework               : @ionic/angular 4.1.1
   @angular-devkit/build-angular : 0.13.5
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.5
   @ionic/angular-toolkit        : 1.4.0

System:

   NodeJS : v10.15.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 7

输入框内呈现的代码

function (control) {
   return isEmptyInputValue(control.value) ? { 'required': true } : null;
}

Answer 1

请将此行 password: new FormControl(Validators.compose([])) 更改为 password: new FormControl() 或 password: new FormControl(Validators.required)

Answer 2

我不确定它在 Ionic 中是如何完成的，但 Iconic 确实使用了 Angular，所以这可行。

password: new FormControl('Default Value', [Validators.compose([Validator.required]))

Answer 3

您应该执行以下操作：

this.loginForm = this.formBuilder.group({
  email    : ["", Validators.compose([Validators.required])],
  password : ["", Validators.compose([Validators.required])]
})

在此处查看指南：

https://angular.io/guide/reactive-forms#step-2-making-a-field-required

ionic 4 + angular 7 Reactive Form with Validators HTML 呈现问题

ionic 4 + angular 7 Reactive Form with Validators HTML rendering issue

validation

ionic-framework

angular

ionic4

angular7