forms - Send data to another component in Angular 4 -
it simple registreation , sms verification form. when submit button clicked in registration form, data posted api. in return, verification sent phone number. in smsverification component, when submit button clicked verification code, username, phone number should posted api. in case, insert username , phone number again in smsverificarion forms. how can send these data form register? (i don't want insert username , phone number again)
register.html
<div id="register"> <div class="col-md-4 col-md-offset-4 register"> <h2>register</h2> <form name="form" (ngsubmit)="f.form.valid && register(f)" #f="ngform" novalidate> <div class="form-group" [ngclass]="{ 'has-error': f.submitted && !firstname.valid }"> <label for="firstname">first name</label> <input type="text" class="form-control" id="firstname" name="firstname" [(ngmodel)]="model.firstname" #firstname="ngmodel" required/> <div *ngif="f.submitted && !firstname.valid" class="help-block">first name required</div> </div> <div class="form-group" [ngclass]="{ 'has-error': f.submitted && !lastname.valid }"> <label for="lastname">last name</label> <input type="text" class="form-control" id="lastname" name="lastname" [(ngmodel)]="model.lastname" #lastname="ngmodel" required/> <div *ngif="f.submitted && !lastname.valid" class="help-block">last name required</div> </div> <div class="form-group" [ngclass]="{ 'has-error': f.submitted && !username.valid }"> <label for="username">username</label> <input type="text" class="form-control" id="username" name="username" [(ngmodel)]="model.username" #username="ngmodel" required/> <div *ngif="f.submitted && !username.valid" class="help-block">username required</div> </div> <div class="form-group" [ngclass]="{ 'has-error': f.submitted && !password.valid }"> <label for="password">password</label> <input type="password" class="form-control" id="password" name="password" [(ngmodel)]="model.password" #password="ngmodel" required/> <div *ngif="f.submitted && !password.valid" class="help-block">password required</div> </div> <div class="form-group" [ngclass]="{ 'has-error': f.submitted && !phone.valid }"> <label for="phone">mobile number</label> <input type="number" class="form-control" id="phone" name="phone" [(ngmodel)]="model.phone" #phone="ngmodel" required/> <div *ngif="f.submitted && !phone.valid" class="help-block">phone required</div> </div> <div class="form-group" [ngclass]="{ 'has-error': f.submitted && !email.valid }"> <label for="email">email address</label> <input type="text" class="form-control" id="email" name="email" [(ngmodel)]="model.email" #email="ngmodel" required/> <div *ngif="f.submitted && !email.valid" class="help-block">bad email format</div> </div> <div class="form-group"> <label>gender</label><br/> <input type="radio" [ngmodel]="{checked: model.gender == 'm'}" (ngmodelchange)="model.gender='m'" name="gender" value="m"> male <input type="radio" [ngmodel]="{checked: model.gender == 'f'}" (ngmodelchange)="model.gender='f'" name="gender" value="f"> female <input type="radio" [ngmodel]="{checked: model.gender == 'n'}" (ngmodelchange)="model.gender='n'" name="gender" value="n"> prefer not </div> <div class="form-group" [ngclass]="{ 'has-error': f.submitted && !dob.valid }"> <label for="dob">birthday</label> <input type="text" class="form-control" id="dob" name="dob" [(ngmodel)]="model.dob" #dob="ngmodel" required/> <div *ngif="f.submitted && !dob.valid" class="help-block">bad birthday format</div> </div> <div class="form-group"> <button [disabled]="loading" class="btn btn-primary button" (click)="opendialog()">register</button> <a [routerlink]="['/login']" class="btn btn-link">cancel</a> </div> </form> </div> </div> register.component.ts
import {component, oninit} '@angular/core'; import {ngform} '@angular/forms'; import {register} './register'; import {registrationservice} './registration.service'; import {router} '@angular/router'; import {mddialog, mddialogref} '@angular/material'; import {smsverificationcomponent} './smsverification.component'; @component({ selector: 'app-register', templateurl: './register.component.html', styleurls: ['./register.component.css'] }) export class registercomponent implements oninit { selectedoption: string; model: register = new register(); constructor(private router: router, private regservice: registrationservice, public dialog: mddialog) { } opendialog() { let dialogref = this.dialog.open(smsverificationcomponent); dialogref.afterclosed().subscribe(result => { this.selectedoption = result; }); } ngoninit() { } register(f: ngform) { this.regservice.save(this.model) .subscribe(resp => { if (resp.responsecontent) { this.router.navigate(['/']); } }); } } register.service.ts
import {injectable} '@angular/core'; import {http} '@angular/http'; import {observable} 'rxjs'; import 'rxjs/add/operator/topromise'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/catch'; import {unauthorizedhttpservice} '../shared/handler/http.service.unauth'; import {register} './register'; import {platformresponse} '../shared/interface/platformresponse'; @injectable() export class registrationservice extends unauthorizedhttpservice { private resource_url: string = 'api/register'; constructor(public http: http) { super(); } save(item: register): observable<platformresponse> { return this.post(this.http, item, this.resource_url); } } smsverification.html
<div> <h1>enter verification code</h1> <form name="form" (ngsubmit)="code.form.valid && verification(code)" #code="ngform" novalidate> <div class="form-group" [ngclass]="{ 'has-error': code.submitted && !vcode.valid }"> <input type="text" class="form-control" id="vcode" name="vcode" [(ngmodel)]="model.vcode" #vcode="ngmodel" required/> <div *ngif="code.submitted && !vcode.valid" class="help-block">verification code required</div> </div> <div class="form-group" [ngclass]="{ 'has-error': code.submitted && !username.valid }"> <input type="text" class="form-control" id="username" name="username" [(ngmodel)]="model.username" #username="ngmodel" required/> <div *ngif="code.submitted && !username.valid" class="help-block">username required</div> </div> <div class="form-group" [ngclass]="{ 'has-error': code.submitted && !phone.valid }"> <input type="text" class="form-control" id="phone" name="phone" [(ngmodel)]="model.phone" #phone="ngmodel" required/> <div *ngif="code.submitted && !phone.valid" class="help-block">phone required</div> </div> <div class="form-group"> <button [disabled]="loading" class="btn btn-primary button">submit</button> </div> </form> </div> smsverification.component.ts
import {component, oninit, input} '@angular/core'; import {mddialogref} '@angular/material'; import {ngform} '@angular/forms'; import {register} './register'; import {smsverificationservice} './smsverification.service'; // import {registrationservice} './registration.service'; import {router} '@angular/router'; @component({ selector: 'app-smsverification', templateurl: './smsverification.component.html', styleurls: ['./smsverification.component.css'], providers: [smsverificationservice], }) export class smsverificationcomponent implements oninit { model: register = new register(); constructor(private router: router, // private regservice: smsverificationservice, private regservice: smsverificationservice, public dialogref: mddialogref<smsverificationcomponent>) { } verification(code: ngform) { this.regservice.save(this.model) .subscribe(resp => { if (resp.responsecontent) { this.router.navigate(['/login']); } }); } ngoninit() { } } smsverification.service.ts
import {injectable} '@angular/core'; import {http} '@angular/http'; import {observable} 'rxjs'; import 'rxjs/add/operator/topromise'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/catch'; import {unauthorizedhttpservice} '../shared/handler/http.service.unauth'; import {register} './register'; import {platformresponse} '../shared/interface/platformresponse'; @injectable() export class smsverificationservice extends unauthorizedhttpservice { private resource_url: string = 'api/checkactivationcode'; constructor(public http: http) { super(); } save(item: register): observable<platformresponse> { return this.post(this.http, item, this.resource_url); } }
Comments
Post a Comment