2017-07-31 13 views
0

私はこのanglejs2を初めて使っています。 ページを使用して、formGroup formControlNameページを使用してnull値をオブジェクトに渡すというエラーが発生しました。angularjs2 formGroup and formControlName

HTMLコード:あなたが渡しているよう

<div class="col-md-8 col-md-offset-2"> 
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> 
     <div class="form-group"> 
      <label for="firstName">firstname</label> 
      <input 
        type="text" 
        id="firstName" 
        class="form-control" 
        formControlName="firstName"> 
     </div> 
     <div class="form-group"> 
      <label for="lastName">lastName</label> 
      <input 
        type="text" 
        id="lastName" 
        class="form-control" 
        formControlName="lastName"> 
     </div> 
     <div class="form-group"> 
      <label for="email">Mail</label> 
      <input 
        type="email" 
        id="email" 
        class="form-control" 
        formControlName="email"> 
     </div> 
     <div class="form-group"> 
      <label for="password">password</label> 
      <input 
        type="password" 
        id="password" 
        class="form-control" 
        formControlName="password"> 
     </div> 
     <button 
      class="btn btn-primary" 
      type="submit" 
      [disabled]="!myForm.valid">Submit</button> 
    </form> 
</div> 


<!-- 
    [formGroup]="myForm" is used to instruct the angular2 to don't use ur own form use mine.' 

    formControlName is used to identify which attribute to match in SignupComponent class 
    --> 

signup.component.tsはそれをオブジェクトに値を渡すときに、私はこのエラーを取得しています

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

    import { AuthService} from './auth.service'; 
    import { User} from './user.model'; 

    @Component({ 
     selector:'app-signup', 
     templateUrl: './signup.component.html' 
    }) 
    export class SignupComponent implements OnInit{ 
     myForm: FormGroup; 

     constructor(private authService : AuthService) {} 

     onSubmit(){ 

        console.log(this.myForm); 

      this.myForm.reset(); 
     } 

     ngOnInit(){ 
      this.myForm = new FormGroup({ 
       firstName: new FormControl(null, Validators.required), 
       lastName: new FormControl(null, Validators.required), 
       email: new FormControl(null, [ 
        Validators.required, 
        Validators.pattern("[A-Z0-9a-z._%+-][email protected][A-Za-z0-9.-]+\\.[A-Za-z]{2,64}") 
       ]), 
       password: new FormControl(null, Validators.required), 

      }); 
     } 
    } 

ファイルは エラーを与えますオブジェクトへのnull値

enter image description here

答えて

0

フォームオブジェクトの参照を次のように解析してください。onSubmit()

関連する問題