Невозможно привязать к formGroup, так как это не известное свойство form-works ... и не - PullRequest
0 голосов
/ 15 апреля 2019

Хорошо, все еще новичок в Ionic (4) / Angular (7), но у меня есть две почти идентичные формы, одна работает нормально, другая - нет и возвращает ошибку. У меня есть форма «Логин», которая работает нормально, и по причинам, в которые я не буду входить, я решил использовать другую форму для «Регистрация» - так что в форме «Логин», если пользователю необходимо зарегистрироваться, Код перейдите на страницу регистрации и при необходимости вернитесь обратно. Форма входа работает просто отлично, но переход на страницу регистрации приводит к ошибке. Я видел несколько других вопросов, связанных с этим, но ни у одного из них не работает, а один нет, и чаще всего кажется, что это результат отсутствия импорта и т. Д. Возможно, это тоже мой случай, но я нахожу это странным. Я проверил текст и, возможно, мне просто не хватает глупой опечатки, ошибки вырезания и прошлых ошибок или чего-то еще, но если так, то я долго смотрел и все еще не вижу ее.

Вот рабочая Форма входа:

<ion-header>
  <ion-toolbar>
    <ion-title>Login</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>

  <form [formGroup]="credentialsForm" (ngSubmit)="onSubmit()">

        <ion-item>
          <ion-label position="floating" >Email</ion-label>
          <ion-input type="email" formControlName="Email" ></ion-input>
        </ion-item>

        <ion-item>
          <ion-label position="floating">Password</ion-label>
          <ion-input type="password" formControlName="Password" ></ion-input>
        </ion-item>

        <ion-button expand="full" type="submit" [disabled]="!credentialsForm.valid">Login</ion-button>
        <ion-button expand="full" type="button" (click)="register()" [disabled]="!credentialsForm.valid">Register</ion-button>
  </form>
</ion-content>

Машинопись для вида:

import { AuthenticationService } from 

'./../../services/authentication.service';
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { HttpParams } from '@angular/common/http';
import { UserData } from 'src/app/models/userdata';
import { Router } from '@angular/router';
import { UserService } from 'src/app/services/user.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})

export class LoginPage implements OnInit {

  credentialsForm: FormGroup;
  private currentUser: UserData;

  constructor(private formBuilder: FormBuilder,
    private authService: AuthenticationService,
    private router: Router,
    private userService: UserService,
    ) {
      this.currentUser = new UserData();
    }

  ngOnInit() {
    this.credentialsForm = this.formBuilder.group({
      Email: ['', [Validators.required, Validators.email]],
      Password: ['', [Validators.required, Validators.minLength(6)]],
    });
  }


  onSubmit() {
    this.currentUser.Email = this.credentialsForm.value.Email;
    this.currentUser.Password = this.credentialsForm.value.Password;
    this.userService.saveUserStore(this.currentUser, false);
    this.authService.login(this.currentUser);
    this.router.navigate(['menu' , 'dashboard']);
  }



  register() {
    console.log('Going to Register Form');
    this.router.navigate(['register']);
  }
}

Итак, вот НЕ рабочая форма Регистра:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
        <ion-back-button defaultHref="/login"></ion-back-button>
    </ion-buttons>
    <ion-title>Register Page</ion-title>
  </ion-toolbar>
</ion-header>


<ion-content padding>


<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">

  <ion-item>
    <ion-label position="floating" >Email</ion-label>
    <ion-input type="email" formControlName="Email" ></ion-input>
  </ion-item>

  <ion-item>
    <ion-label position="floating">Password</ion-label>
    <ion-input type="password" formControlName="Password" ></ion-input>
  </ion-item>

  <ion-item>
    <ion-label position="floating">Confirm Password</ion-label>
    <ion-input type="password" formControlName="ConfirmPassword" ></ion-input>
  </ion-item>

  <ion-button expand="full" type="submit" (click)="register()" [disabled]="!registerForm.valid">Register</ion-button>
  <ion-button expand="full" type="button" [disabled]="!registerForm.valid">Login</ion-button>

</form>

</ion-content>

... и код Typescript для него:

import { AuthenticationService } from './../../services/authentication.service';
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { HttpParams } from '@angular/common/http';
import { UserData } from 'src/app/models/userdata';
import { Router } from '@angular/router';
import { UserService } from 'src/app/services/user.service';


@Component({
  selector: 'app-register',
  templateUrl: './register.page.html',
  styleUrls: ['./register.page.scss'],
})

export class RegisterPage implements OnInit {

  registerForm: FormGroup;
  private currentUser: UserData;

  constructor(private formBuilder: FormBuilder,
    private authService: AuthenticationService,
    private router: Router,
    private userService: UserService,
    ) {
      this.currentUser = new UserData();
    }

  ngOnInit() {
    this.registerForm = this.formBuilder.group({
      Email: ['', [Validators.required, Validators.email]],
      Password: ['', [Validators.required, Validators.minLength(6)]],
      ConfirmPassword: ['', [Validators.required, Validators.minLength(6)] ]
    });
  }

  onSubmit() {
    this.authService.register(this.registerForm.value).subscribe(() => {
      // Call Login to automatically login the new user
      this.authService.login(this.registerForm.value);
    });
  }

  login() {
    this.router.navigate(['login']);
  }
}

Вещи, которые я пробовал: При создании модуля приложения импортируются модуль ReactiveForms и FormsModule. (не имеет никакого значения, поэтому я закомментировал это сейчас, поскольку он работает без для страницы входа). Заполнение формы регистрации (все еще не работает) Сделать страницу регистрации пустой, но для заголовка (просто чтобы проверить навигацию, которая работала) ... Это кажется странным, и я продолжаю думать, что, возможно, где-то допустил ошибку вырезания и вставки, но если это так, я не могу это увидеть, так что, возможно, еще одна пара глаз. Большое спасибо ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...