typescript - Cómo hacer que las rutas del formulario se ejecuten solo si la respuesta es exitosa (Angular 4)

Quiero redirigir a un nuevo componente solo si el formulario se envió correctamente porque usaré el componente generado a partir de la respuesta de la API.

Escribí un código al final de la función click, pero no está funcionando, así que necesito saber qué falta.

Mi componente 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);
    };
 }

Mi HTML de componente:

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

No dudes en pedir más detalles.

Respuesta #1

Inténtalo

if(!form.valid)
{
    //Form not valid. Don't do anything
    return;
}
//Form is valid => post data
this._http.post(this.url, formData)
.subscribe(response => {
   //data correctly posted => navigate to other route
   this.selectedSchoolId = response.data.id;
    // debugger;
    console.log(this.selectedSchoolId);
    this.router.navigate(['/newaisdivision/', 
this.selectedSchoolId]);
  }, (err: HttpErrorResponse) => {
    console.log(err);
  });

Respuesta #2

Coloca tu navegador de rutas bajo la respuesta de éxito de la solicitud POST

this._http.post(this.url, formData)
.subscribe(response => {
   this.selectedSchoolId = response.data.id;
    // debugger;
    console.log(this.selectedSchoolId);
    return this.selectedSchoolId;
// Here
this.router.navigate(['/newaisdivision/', 
this.selectedSchoolId]);
  }, (err: HttpErrorResponse) => {
    console.log(err);
  });

Espero que eso ayude.