Ионная 4 + угловая 7 Реактивная форма с валидаторами Проблема рендеринга HTML - PullRequest
Новая
       24

Ионная 4 + угловая 7 Реактивная форма с валидаторами Проблема рендеринга HTML

0 голосов
/ 10 марта 2019

Я довольно плохо знаком с ионным и угловым, и я пытаюсь учиться с помощью учебников.

Следуя инструкциям по созданию формы входа в систему с использованием Реактивные формы , я сталкиваюсь со следующей проблемой: когда я объявляю Validator для FormControl (поле ввода) в FormBuilder, интерфейс показывает функция javascript, отображаемая внутри текстового поля (вместо отображения текста заполнителя).

Здесь ниже код для контроллера, представление, конфигурация моей среды и то, что я получаю в графическом интерфейсе. Это может быть проблема версии / зависимостей?
Как я могу исправить или обновить версию зависимостей, не нарушая все?
Или просто я нашел ошибку в фреймворке?

Заранее большое спасибо.

С уважением.

Код контроллера: 

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;
}

GUI rendered

Ответы [ 3 ]

1 голос
/ 11 марта 2019

Я не уверен, как это делается в Ionic, но iconic использует Angular, так что это может сработать. 

password: new FormControl('Default Value', [Validators.compose([Validator.required]))
1 голос
/ 11 марта 2019

Вы должны сделать следующее: 

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

0 голосов
/ 10 марта 2019

Пожалуйста, измените эту строку password: new FormControl(Validators.compose([])) на password: new FormControl() или password: new FormControl(Validators.required)

...