Ionic2, Angular, Form validation with API calls

Question

How to use form validation with API calls to check if data is correct? Whenever I enter this Signup page I got errors like:

Cannot read property 'put' of undefined
Cannot read property 'http' of undefined

Could you guide me what is wrong in my code? HTML:

<ion-content padding>
  <p *ngIf="submitAttempt" style="color: #ea6153;">Please fill out all details accurately.</p>
  <ion-list inset>
    <form [formGroup]="signupForm">
      <ion-item>
        <ion-input formControlName="userName" [(ngModel)]="userName" placeholder="UserName" type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-input formControlName="email" [(ngModel)]="email" placeholder="Email" type="email"></ion-input>
      </ion-item>
      <ion-item>
        <ion-input formControlName="password" [(ngModel)]="password" placeholder="Password" type="password"></ion-input>
      </ion-item>
    </form>
    <button ion-button block (click)="register()">Register</button>
  </ion-list>
</ion-content>

And this is my TS file, this code is inside constructor:

this.signupForm = formBuilder.group({
      userName: ['', Validators.compose([Validators.required, Validators.pattern('[a-zA-Z]*')]), this.authService.checkUserName],
      email: ['', this.authService.checkEmail],
      password: ['']
    });

this.authService is a class with API calls, here is one of the call, seconds looks same just with different address:

checkUserName(control: FormControl): any {
    return new Promise((resolve, reject) => {

      let headers = new Headers();
      headers.append('Content-Type', 'application/json');

      this.http.put('http://localhost:63203/api/Customers/CheckIfUserExist', JSON.stringify(control.value), { headers: headers })
        .subscribe((res) => {
          resolve(res);
        }, (err) => {
          reject(err);
        });
    });
  }

Possible duplicate of [How to access the correct \`this\` context inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback) — Pengyy, May 25 '17 at 08:02

Pengyy · Accepted Answer · 2017-05-25T07:54:46.770

1

you should use array function to keep the original context.

this.signupForm = formBuilder.group({
  userName: ['', Validators.compose([Validators.required, Validators.pattern('[a-zA-Z]*')]), () => this.authService.checkUserName()],
  email: ['', () => this.authService.checkEmail()],
  password: ['']
});

edited May 25 '17 at 07:54

answered May 25 '17 at 07:51

Pengyy

37,383
15
83
73

I think it should be `() => this.authService.checkUserName()` or `this.authService.checkUserName.bind(this)` – eko May 25 '17 at 07:53
1

@echonax oh, I didn't mention that, just add the arrow function. :P – Pengyy May 25 '17 at 07:54
@echonax I was trying to find the famous duplicate question, but failed, if you now that you can mark this question as duplicate. :-) – Pengyy May 25 '17 at 07:57
You mean https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback? – eko May 25 '17 at 07:58
1

@echonax yeah! that's it. – Pengyy May 25 '17 at 08:00
now I have error: ERROR Error: Expected validator to return Promise or Observable. – May 25 '17 at 08:13
if I delete the subscribe part how can I get answer from the server? – May 25 '17 at 08:23
@ChrisK. I didn't got this problem on my local environment. Please produce your problem with a plunker If possible. – Pengyy May 25 '17 at 10:56
@ChrisK. please mention that you should use `() => this.authService.checkUserName()`, not `() => this.authService.checkUserName`. `()` is needed here. :-) – Pengyy May 26 '17 at 02:56
@ChrisK. here is an example plunker, https://plnkr.co/edit/Gi6KQu99mQhGguzK9xjg?p=preview hope it'll help :-) – Pengyy May 26 '17 at 03:06
thank you for this example, now I have no errors but also API calls are not being used, do you have any ideas on that? I did some console.log to see everything but they are no even get called – May 26 '17 at 06:27
@ChrisK. that's issue about `Validator.compost` which I'm not familiar with, in the example I provided, I'm not using it. :-) – Pengyy May 26 '17 at 06:28

Ionic2, Angular, Form validation with API calls

1 Answers1