Я не могу поймать значение поля ввода в угловой реактивной форме - PullRequest
Новая
       23

Я не могу поймать значение поля ввода в угловой реактивной форме

0 голосов
/ 28 августа 2018

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

<span *ngIf="signupForm.control['fname'].haserror(required) && signForm.control['fname'].invalid &&  signForm.control['fname'].touched "> Enter your Name </span>

.. но я получаю ошибка -> 

 ERROR TypeError: Cannot read property 'fname' of undefined

Я помещаю все детали формы

HTML-код - 

<form [formGroup]='signupForm' (ngSubmit)="PostData(signupForm)">
       <h2 class="text-center"> Registeration Form </h2>
      <br/>
      <div class="form-group">
       <input type="text" formControlName='fname'  placeholder="First Name">
       <span *ngIf="signupForm.control['fname'].haserror(required) && signForm.control['fname'].invalid &&  signForm.control['fname'].touched "> Enter your Name </span>
      </div>  

 <input type="submit" value="Post Data" [disabled]='!signupForm.valid'>
          </div>
          </form>

код файла ts -> 

export class ReactiveComponent implements OnInit {

  signupForm: FormGroup;
  FirstName: string = '';
  LastName: string = '';
  Eamil: string = '';
  Password: string = '';
  constructor(public frmbuilder: FormBuilder) { // formBuilder assign all the formcontrol to formgroup
    this.signupForm = frmbuilder.group({
    fname: ['',Validators.compose([Validators.required , Validators.minLength(4)])],  // FormControl  Used to bring input value to the ts file 
    lname: ['', Validators.required],
    Emailid: ['', [Validators.required , Validators.email]],
    userpassword: ['', Validators.required ]
});


   }

  ngOnInit() {
  }

  PostData(signupForm: any) {
    console.log(signupForm.controls);
    this.FirstName  = signupForm.controls.fname.value;
    this.LastName  = signupForm.controls.lname.value;
    this.Eamil  = signupForm.controls.Emailid.value;
    this.Password  = signupForm.controls.userpassword.value;

  }

1 Ответ

0 голосов
/ 28 августа 2018

должно быть,

hasError всегда быть в camelCase 

<span *ngIf="signupForm.get('fname').hasError(required) && signupForm.get('fname').invalid &&  signupForm.get('fname').touched "> Enter your Name </span>
...