Angular2 observables http - comment travailler avec get de indéfini?

Question

J'ai essayé d'utiliser le service pour la validation suis obtenir des erreurs comme indiqué ci-dessous 1: ERROR Erreur: formGroup attend une instance FormGroup. S'il vous plaît passer un à

Exemple:.

<div [formGroup]="myGroup">  
    <input formControlName="firstName">  
</div>   

Dans votre classe:

this.myGroup = new FormGroup({  
    firstName: new FormControl()  
}); 

2.

ng:///AppModule/HeroFormReactiveComponent.ngfactory.js:95 ERROR TypeError: Cannot read property 'get' of undefined 
    at FormGroupDirective.webpackJsonp.../../../forms/@angular/forms.es5.js.FormGroupDirective.addControl (vendor.bundle.js:64292) 
    at FormControlName.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControlName._setUpControl (vendor.bundle.js:64881) 
    at FormControlName.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControlName.ngOnChanges (vendor.bundle.js:64799) 
    at checkAndUpdateDirectiveInline (vendor.bundle.js:55512) 
    at checkAndUpdateNodeInline (vendor.bundle.js:57011) 
    at checkAndUpdateNode (vendor.bundle.js:56950) 
    at debugCheckAndUpdateNode (vendor.bundle.js:57811) 
    at debugCheckDirectivesFn (vendor.bundle.js:57752) 
    at Object.View_HeroFormReactiveComponent_0._co [as updateDirectives] (ng:///AppModule/HeroFormReactiveComponent.ngfactory.js:218) 
    at Object.debugUpdateDirectives [as updateDirectives] (vendor.bundle.js:57737) 

Je pense que je devrais utiliser la fonction observable/rappellerons si que nous pouvons appeler des fonctions() après avoir obtenu les données du service. Mais je ne suis pas sûr de savoir comment faire cela ... Merci à l'avance

TS:

export class HeroFormReactiveComponent implements OnInit { 
    loginDetailsArray: any; 
    detailsArray: any[]; 
    minLength: any; 
    maxLength: any; 
    pattern: any; 
    // customerDetail: any[]; 


    hero = { 
    username: '', 
    password: '', 
    email: '' 
    }; 
    constructor(private customerService: CustomerService, private http: Http) {} 


    heroForm: FormGroup; 


    ngOnInit(): void { 

    this.loginDetailsArray = new Object(); 
    this.detailsArray = new Array(); 
    this.loadLoginDetails(); 



    } 


    functions() { 

    console.log("print"); 
    console.log(this.loginDetailsArray); 

    var minLength = this.loginDetailsArray.rules.username.minlength; 
    var maxLength = this.loginDetailsArray.rules.username.maxlength; 
    var pattern = this.loginDetailsArray.rules.username.pattern; 


    this.heroForm = new FormGroup({ 

     'username': new FormControl(this.hero.username, [ 
     Validators.minLength(this.minLength), 
     Validators.maxLength(this.maxLength), 
     // Validators.pattern(pattern), 
     ]), 
     'password': new FormControl(this.hero.password, [ 
     Validators.minLength(2), 
     Validators.maxLength(30), 
     ]), 
    }); 
    } 

    loadLoginDetails() { 

    this.customerService.getLoginDetails().subscribe(res => { 

     this.loginDetailsArray = res.json(); 

     this.functions(); 

    }); 
    } 




    get username() { 
    return this.heroForm.get('username'); 
    } 
    get password() { 
    return this.heroForm.get('password'); 
    } 

    save() { 

    console.log('Saved: ' + JSON.stringify(this.heroForm.value)); 


    this.detailsArray.push(this.heroForm.value); 


    } 
} 

SERVICE:

@Injectable() 
export class CustomerService{ 

    constructor(private http:Http){} 


    getLoginDetails(){ 

     console.log("getLoginDetails") 
     //return this.http.get(assets/login.json).map((response: Response) => response.json()); 
     return this.http.get('assets/login.json').map((response: Response) => response); 

    } 
} 

HTML:

<div class="container"> 

    <h1>Login</h1> 

    <form (ngSubmit)="save()" [formGroup]="heroForm" #formDir="ngForm"> 


     <div [hidden]="formDir.submitted"> 

      <div class="form-group"> 

       <label for="username">username</label> 
       <input id="username" class="form-control" formControlName="username"> 

       <div *ngIf="username.invalid && (username.dirty || username.touched)" class="alert alert-danger"> 

        <div *ngIf="username.errors.required"> 
         required 
        </div> 
        <div *ngIf="username.errors.minlength"> 
         Please enter a valid email that does not exceed the character limit 
        </div> 
        <div *ngIf="username.errors.maxlength"> 
         Please enter a valid email that does not exceed the character limit 
        </div> 
        <div *ngIf="username.errors.pattern"> 
         Please enter a valid email address 
        </div> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label for="password">Password</label> 
       <input id="password" class="form-control" formControlName="password" required> 

       <div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert alert-danger"> 

        <div *ngIf="password.errors.required"> 
         required 
        </div> 
        <div *ngIf="password.errors.minlength"> 
         Please enter a password with minimum characters 
        </div> 
        <div *ngIf="password.errors.maxlength"> 
         Please enter a password that does not exceed 30 characters 
        </div> 

       </div> 
      </div> 



      <button type="submit" class="btn btn-default" [disabled]="heroForm.invalid">Submit</button> 
      <!--<td colspan="2"> 
      <div class="alert alert-danger col-md-12" role="alert" *ngIf="!flag"> 
       <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> {{errormsg}} 
      </div> 
      </td>--> 


     </div> 
    </form> 

Answer 1

S'il vous plaît voir le travail version de votre exigence.

<h1>Login</h1> 

<form (ngSubmit)="save()" [formGroup]="heroForm" > 


    <div > 

     <div class="form-group"> 

      <label for="username">username</label> 
      <input #username id="username" class="form-control" formControlName="username"> 

      <div *ngIf="heroForm.get('username').invalid && (heroForm.get('username').dirty || heroForm.get('username').touched)" class="alert alert-danger"> 


       <div *ngIf="heroForm.get('username').hasError('minlength')"> 
        Please enter a valid email that does not exceed the character limit 
       </div> 
       <div *ngIf="heroForm.get('username').hasError('maxlength')"> 
        Please enter a valid email that does not exceed the character limit 
       </div> 

      </div> 
     </div> 

     <div class="form-group"> 
      <label for="password">Password</label> 
      <input #password id="password" class="form-control" formControlName="password" required> 

      <div *ngIf="heroForm.get('password').invalid && (heroForm.get('password').dirty || heroForm.get('password').touched)" class="alert alert-danger"> 

       <div *ngIf="heroForm.get('password').hasError('required') && heroForm.get('password').touched" 
       class="alert alert-danger"> Password is required.</div> 
       <div *ngIf="heroForm.get('password').hasError('minlength')"> 
        Please enter a password with minimum characters 
       </div> 
       <div *ngIf="heroForm.get('password').hasError('maxlength')"> 
        Please enter a password that does not exceed 30 characters 
       </div> 

      </div> 
     </div> 



     <button type="submit" class="btn btn-default" [disabled]="heroForm.invalid">Submit</button> 
     <!--<td colspan="2"> 
     <div class="alert alert-danger col-md-12" role="alert" *ngIf="!flag"> 
      <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> {{errormsg}} 
     </div> 
     </td>--> 


    </div> 
</form> 

Component.ts

export class SampleComponent OnInit { 

    public loginDetailsArray: any= []; 
    public detailsArray: any= []; 
    public minLength: any; 
    public maxLength: any; 
     hero = { 
     username: '', 
     password: '', 
     email: '' 
     }; 


     constructor(private dataTableService: DataTableService,private fb: 
    FormBuilder ) { 

    this.dataTableService = dataTableService; 
     this.heroForm = new FormGroup({ 

     'username': new FormControl(this.hero.username), 
     'password': new FormControl(this.hero.password, [ 
     Validators.minLength(2), 
     Validators.maxLength(30), 
     ]), 
    }); 

    } 
       heroForm: FormGroup; 
        public ngOnInit(): void { 


      this. loadLoginDetails(); 


      } 

     loadLoginDetails() { 

    this.dataTableService.getLoginDetails().subscribe(
     res => { 
     this.loginDetailsArray = res; 

     this. minLength=this.loginDetailsArray.minlength; 
     this.maxLength=this.loginDetailsArray.maxLength; 
    console.log("minLength",this.minLength); 
    this.heroForm.controls["username"].setValidators([ 
     Validators.minLength(this.minLength), 
     Validators.maxLength(this.maxLength) 
     // Validators.pattern(pattern), 
     ]); 
     console.log(this.heroForm); 



     }); 
    } 
     get username() { 
     return this.heroForm.get('username'); 
      } 
     get password() { 
     return this.heroForm.get('password'); 
     } 
     save() { 

     console.log('Saved: ' + JSON.stringify(this.heroForm.value)); 


     this.detailsArray.push(this.heroForm.value); 


     } 


    } 

service.ts

@Injectable() 
export class DataTableService { 

    constructor(private http: Http) { 
     this.http = http; 
    } 

    getLoginDetails(): Observable<any> { 
     return this.http.get('./datatable/data/sample.json').map((response: Response) => response.json()); 
    } 
}