这是我的编辑表单 html 模板
<div class="row">
<div class="col-xs-12">
<form [formGroup]="recipeForm" (ngSubmit)="onSubmit()">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-success" type="submit" [disabled]="!recipeForm.valid">Save</button>
<button class="btn btn-danger" (click)="onCancel()">Cancel</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" class="form-control" formControlName="recipename">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="imageurl">Image URL</label>
<input type="text" id="imageurl" class="form-control" formControlName="imageurl" #imagePath>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<img [src]="imagePath.value" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="desc">Description</label>
<textarea id="desc" cols="20" rows="8" class="form-control" formControlName="desc"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12" formArrayName="ingredients">
<div class="row" *ngFor="let ingredient of recipeForm.get('ingredients').controls;let i=index"[formGroupName]="i" style="margin-bottom: 10px">
<div class="col-xs-8" >
<input type="text" class="form-control" formControlName="name">
</div>
<div class="col-xs-2">
<input type="number" class="form-control" formControlName="amount">
</div>
<div class="col-xs-2">
<button class="btn btn-danger form-control" (click)="onDeleteIngredient(i)">X</button>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-success" (click)="onAddIngredient()">Add Ingredient</button>
</div>
</div>
</form>
</div>
</div>
这是我的编辑组件
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import {ActivatedRoute, Params, Router} from "@angular/router";
import {RecipeService} from "../recipes.service";
import {FormGroup, FormControl, FormArray,Validators} from '@angular/forms';
import {Recipe} from "../recipe.model";
@Component({
selector: 'app-recipes-edit',
templateUrl: './recipes-edit.component.html',
styleUrls: ['./recipes-edit.component.css'],
})
export class RecipesEditComponent implements OnInit {
id:number;
editMode:boolean=false;
recipeForm:FormGroup;
constructor(private route:ActivatedRoute,private recipeService:RecipeService,private router:Router) { }
ngOnInit() {
this.route.params.subscribe((params:Params)=>{
this.id=+params['id'];
this.editMode=params['id']!=null;
this.initForm();
})
}
private initForm(){
let recipeName='';
let imageurl='';
let description='';
let ingredients=new FormArray([]);
if(this.editMode) {
const recipe = this.recipeService.getSingleRecipe(this.id);
recipeName=recipe.name;
imageurl=recipe.imagePath;
description=recipe.description;
if(recipe['ingredients']){
for(let ingredient of recipe.ingredients){
ingredients.push( new FormGroup({
'name':new FormControl(ingredient.name,Validators.required),
'amount':new FormControl(ingredient.amount,[Validators.required,Validators.pattern(/^[1-9]+[0-9]*$/)])
}))
}
}
}
this.recipeForm=new FormGroup({
'recipename':new FormControl(recipeName,Validators.required),
'imageurl':new FormControl(imageurl,Validators.required),
'desc':new FormControl(description,Validators.required),
'ingredients': ingredients
})
}
onAddIngredient(){
(<FormArray>this.recipeForm.get('ingredients')).push(
new FormGroup({
'name':new FormControl(null,Validators.required),
'amount':new FormControl(null,[Validators.required,Validators.pattern(/^[1-9]+[0-9]*$/)])
})
)
}
onSubmit(){
const newRecipe=new Recipe(
this.recipeForm.value['recipename'],
this.recipeForm.value['desc'],
this.recipeForm.value['imageurl'],
this.recipeForm.value['ingredients']
);
if(this.editMode) {
this.recipeService.updateRecipe(this.id, newRecipe)
}else{
this.recipeService.addRecipe(newRecipe);
}
this.onCancel();
}
onCancel(){
this.router.navigate(['../'],{relativeTo:this.route})
}
onDeleteIngredient(){
}
}
我面临的问题是，当我单击“添加成分”按钮时，它会重定向回另一条路径，而不是添加成分字段。但我从未编写过导致 onAddIngredient() 方法重定向的代码。
我只为取消和保存按钮编写了导航代码。我无法弄清楚导致此重定向的实际原因。有人可以帮我解决这个问题。我希望在单击保存或取消按钮时发生重定向。