Angular Реактивная форма с проверкой: ОШИБКА TypeError: Невозможно прочитать свойство 'firstName' из неопределенного - PullRequest
Новая
       20

Angular Реактивная форма с проверкой: ОШИБКА TypeError: Невозможно прочитать свойство 'firstName' из неопределенного

0 голосов
/ 25 апреля 2020

Я попытался Реактивная форма с некоторыми проверками, я пытаюсь показать ошибку, когда поле Имя пусто. Но он показывает " ОШИБКА TypeError: Невозможно прочитать свойство 'firstName' из неопределенного "

Это код моего файла .ts 

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

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

  signupForm:FormGroup;
  fName:string="";
  lName:string="";
  emailID:string="";
  pswd:string="";

  constructor(private formBuilder:FormBuilder) {
    this.signupForm=formBuilder.group({
      firstName: ['', Validators.required],
      lastName: ['', [Validators.required, Validators.maxLength(10)]],
      Emailid: ['', [Validators.required, Validators.email]],
      PasswordN: ['', Validators.required]
    });
   }


  PostData(signupForm:any){
    console.log(signupForm.controls);
  }


  ngOnInit(): void {
  }

Это мой conp onet. html код страницы. Ошибка в этой строке: введите ваше имя 

                <form [formGroup]='signupForm' (ngSubmit)="PostData(signupForm)">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="First Name" formControlName="firstName" />
                        <div *ngFor="signupForm.control['firstName'].haserror(required)"> Enter Your First Name </div>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Last Name" formControlName="lastName" />
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Email" formControlName="Emailid" />
                    </div>   
                    <div class="form-group">
                        <input type="password" class="form-control" placeholder="Password" formControlName="PasswordN" />
                    </div>                 
                    <div class="form-group">
                        <button type="submit" class="btn bg-success text-white" [disabled]='!signupForm.valid' > Register </button>
                    </div>
                </form>

Ответы [ 2 ]

0 голосов
/ 25 апреля 2020

Изменить строку 

<div *ngFor="signupForm.control['firstName'].haserror(required)"> Enter Your First Name </div>

К этой строке 

 <div *ngIf="signupForm.controls.firstName.hasError('required')"> Enter Your First Name </div>
0 голосов
/ 25 апреля 2020

Как прокомментировал @Olivier, оно должно быть: 

signupForm.controls['firstName']...

и haserror() возвращает логическое значение, в этом случае * ngFor не будет применяться, вместо этого используйте * ngIf.

Итак, ваш HTML код будет: 

<div *ngIf="signupForm.controls['firstName'].haserror(required)"> Enter Your First Name </div>
...