jeudi 22 février 2018

How to make the form routes only if the response successful (Angular 4)

I want to route to a new component only if the form submitted successfully because i will use the generated component from the API response.

I wrote a code in the end of the click function but its not working so i need to know what is missing.

My component TS:

import { HttpClient, HttpErrorResponse, HttpClientModule } from 
'@angular/common/http';
import {NgForm} from '@angular/forms';


constructor(private _http: HttpClient, private mapsAPILoader: 
MapsAPILoader, private ngZone: NgZone, private route: ActivatedRoute,
          private DivisionsService: DivisionService, private router: 
Router, private schoolService: SchoolService) { // HttpClient not Http
this.getMyBlog();
this.educationType();
}


onSubmit(form: NgForm) {
var data = form.value;
let formData: FormData = new FormData();
this.grade = event.target.checked;
gradeName);
formData.append('logo', this.imageFile, this.imageFile.name);
formData.append('name', data.name);
formData.append('vision', data.vision);
formData.append('mission', data.mission);
formData.append('address', data.address);
formData.append('district_id', this.district_id);
formData.append('emails[0][title]', data.title);
formData.append('emails[0][email]', data.email);
formData.append('numbers[0][title]', data.numbertitle);
formData.append('numbers[0][number]', data.number);
formData.append('schoolyears[0][start_date]', data.start_date);
formData.append('schoolyears[0][end_date]', data.end_date );
formData.append( 'schooltypes[0][type_id]', this.type_id );
this._http.post(this.url, formData)
.subscribe(response => {
   this.selectedSchoolId = response.data.id;
    // debugger;
    console.log(this.selectedSchoolId);
    return this.selectedSchoolId;
  }, (err: HttpErrorResponse) => {
    console.log(err);
  });

 if(form.valid == true) {
   .subscribe((response) => {

   this.router.navigate(['/newaisdivision/', 
this.selectedSchoolId]);
    }, (error) {
      console.log('err', error);
    };
 }

My component HTML:

<input  type="submit" name="submit"  class="submit action-
button"  (click)="onSubmit(registerForm)" value="Submit"/>

Feel free to ask any more details.

Aucun commentaire:

Enregistrer un commentaire