angular - 仅当响应成功时如何使表单路由(Angular 4)

Question

我只想在表单成功提交时路由到新组件，因为我将使用 API 响应生成的组件。

我在点击功能的末尾写了一段代码，但它不起作用，所以我需要知道缺少什么。

我的组件 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);
    };
 }

我的组件 HTML:

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

欢迎询问更多详情。

Answer 1

试试看

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