Я получаю следующую ошибку: ОШИБКА TypeError: Невозможно прочитать свойство 'invalid' из undefined - PullRequest
Новая
       38

Я получаю следующую ошибку: ОШИБКА TypeError: Невозможно прочитать свойство 'invalid' из undefined

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

Я пробовал другие решения, такие как исправление ссылок на формы, но это не помогло мне.Вот моя форма для входа в систему 

    <form [formGroup]="longinForm" (ngSubmit)="onSubmit()">
    <h1>Login Form</h1>

      <div class="form-group" >
        <label for="name" >Username</label>
        <input type="text" name ="user" [(ngModel)]="loginuserdata.user" 
 #user="ngModel" 
        class="form-control" required >
        <div *ngIf="submitted">
        <div [hidden]="user.valid || user.pristine" class="alert alert-danger">
          Username is required
        </div>
        </div>
      </div>

      <div class="form-group" >
        <label for="pass" >Password</label>
        <input type="text" name="pass" [(ngModel)]="loginuserdata.pass" #pass="ngModel"
        class="form-control"  required >
        <div *ngIf="submitted">
        <div [hidden]="pass.valid || pass.pristine" class="alert alert-danger">
            Password is required
        </div>
        </div>
      </div>
      <button type="submit" class="btn btn-success">Submit</button>
    </form>

также вот мой компонент для входа в систему 

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgForm, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { LoginService } from './login.service';
import { ILoginData } from './login-data';

@Component({
  selector: 'app-loginform',
  templateUrl: './loginform.component.html',
  styleUrls: ['./loginform.component.css']
})
export class LoginformComponent implements OnInit {

  loginForm:FormGroup;
  loginuserdata : any[] = [];
  error:string;

  submitted=false;

  constructor(private route: Router,private service:LoginService) { }

  get f(){return this.loginForm.controls;}

  ngOnInit() {
    this.onSubmit();
  }

  onSubmit(){

    if(this.loginForm.invalid){return;}//form invalid stop here
    //form is valid do something
    this.submitted=true;
    if(this.f.user.value == "Admin" && this.f.pass.value == "Apassword"){
    this.service.getAdmin()
    .subscribe(data => this.loginuserdata = data)
              this.route.navigateByUrl('admin');
              err => this.error = err;
              console.log(this.error);
    }

  }

}

Если вам, ребята, нужно увидеть какие-либо другие части моего кода, дайте мне знать, пожалуйста, помогите мнеЯ попробовал что-то похожее на ответ, решенный для этого, но у меня это не сработало.

Ответы [ 2 ]

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

Вам нужно создать элементы управления формой, вы уже определили их, но вам нужно что-то вроде следующего.Вам нужно инициализировать группу форм. 

import { NgForm, FormGroup, FormBuilder } from '@angular/forms'; 

//Be sure to import formBuilder and inject through constructor. This will allow you 
//to manage how you will build the form and add validation.
//Its a helper class provided by Angular to help us explicitly declare forms.

constructor( private formBuilder: FormBuilder ){}

public ngOnInit(): void {
    this.loginForm = this.formBuilder.group({
    username: ['', Validators.required],
    password: ['', Validators.required]
});

Здесь вы можете определить элементы управления и валидаторы для группы форм.(Этот пример просто указывает на то, что для каждого из них должно быть определено значение. Это должно быть встроено в ngOnInit.

. Затем в вашем шаблоне вы можете удалить [(ngModel)] и сделатьэто выглядит следующим образом: Значение для ввода будет удерживаться внутри элемента управления, когда вам нужно получить к нему доступ. 

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <input type="text" name ="user" [formControlName]="'username'" 
  class="form-control" required>
<form>

Выше приведен пример для имени пользователя / адреса электронной почты для входа в систему. Также как упоминалосьв комментариях у вас есть опечатка в форме в HTML.

Это должно быть допустимо, когда вы пытаетесь получить доступ к valid и invalid свойствам группы from. Комментируйте, если у вас есть какие-либопроблема.

Вот документация Angular для реактивных форм .

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

Как насчет этого?

ngAfterViewInit() { this.onSubmit() }

Я думаю, что это еще не было определено в ngOninit. Проверьте жизненный цикл.

...