[ad_1]
HTML コード:
<div class="row"> <div class="col-xs-12"> <form [formGroup]="recipeForm" (ngSubmit)="onSubmit()" > <div class="row"> <div class="col-xs-12"> <button type="submit" class="btn btn-success" [disabled]="!recipeForm.valid">Save</button> <button type="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" [formControlName]="'name'" class="form-control"> </div> </div> </div> <div class="row"> <div class="col-xs-12"> <div class="form-group"> <label for="ImagePath">ImageUrl</label> <input type="text" id="ImagePath" class="form-control" [formControlName]="'imagePath'" #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="description">Description</label> <textarea type="text" id="description" [formControlName]="'description'" class="form-control" rows="6"></textarea> </div> </div> </div> <div class="row"> <div class="col-xs-12" formArrayName="ingredients"> <div class="row" *ngFor="let ingredientCtrl of controls; let i=index" [formGroupName]="i" style="margin-top: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 type="button" class="btn btn-danger" (click)="onDeleteIngredient(i)">X</button> </div> </div> <div class="row"> <div class="col-xs-12"> <button type="button" class="btn btn-success" (click)="onAddIngredient()">Add Ingredients</button> </div> </div> </div> </div> </form>
MY.TS ファイル
import { Component, OnInit } from ‘@angular/core’;
import { Params, ActivatedRoute, Router } from ‘@angular/router’;
import {FormGroup, FormControl, FormArray, Validators} from ‘@angular/forms’;
import { RecipeService } from ‘../recipe.service’;
@成分（{
セレクター: ‘app-recipe-edit’,
templateUrl: ‘./recipe-edit.component.html’,
スタイルの URL: [‘./recipe-edit.component.css’]
}))
エクスポート クラス RecipeEditComponent は OnInit を実装します {
ID番号;
editMode=false;
レシピフォーム:フォームグループ;
コンストラクタ(プライベートルート:ActivatedRoute,プライベートレシピサービス:レシピサービス,
プライベート ルーター:ルーター) { }
ngOnInit(): ボイド {
this.route.params.subscribe(
(パラメータ:パラメータ)=>{
this.id=+params[‘id’];
this.editMode=params[‘id’]!=ヌル;
console.log( this.editMode);
this.initForm();//ルートが変更されたときにここにロードします
//次に、それをロードする必要があります (それによって、このページがリロードされていることがわかります)
}
);
}
コントロールを取得する(){
return (
}
onSubmit() {
//const newRecipe=新しいレシピ(
// this.recipeForm.value[‘name’]、
// this.recipeForm.value[‘description’]、
// this.recipeForm.value[‘imagePath’]、
//this.recipeForm.value[‘ingredients’]);
if(this.editMode){
this.recipeService.updateRecipe(this.id,this.recipeForm.value);
}それ以外{
this.recipeService.addRecipe(this.recipeForm.value);
}
this.onCancel();
}
onAddIngredient() {
(
new FormGroup({
‘name’:new FormControl(null,Validators.required),
‘amount’:new FormControl(null,[Validators.required,Validators.pattern(/^[1-9]+[0-9]+$/)])
}))
);
}
onCancel(){
this.router.navigate([‘../’],{relativeTo:this.route});
}
onDeleteIngredient(index:number){
(
}
プライベート initForm() {
let レシピ名=””;
let レシピイメージパス=””;
let レシピ説明 = ”;
let レシピの材料 = 新しい FormArray([]);
if(this.editMode){
const レシピ = this.recipeService.getRecipe(this.id);
レシピ名=レシピ名;
レシピイメージパス=レシピ.イメージパス;
レシピの説明=レシピ.説明;
もし(レシピ[‘ingredients’]){
for(recipe.ingredientsの材料を入れる){
レシピIngredients.push(
new FormGroup({
‘name’: new FormControl(ingredient.name,Validators.required),
‘amount’:new FormControl(成分.量,[Validators.required,Validators.pattern(/^[1-9]+[0-9]*$/)])
}))
);
}
}
this.recipeForm=新しいフォームグループ(
{
‘name’:new FormControl(recipeName,Validators.required),
‘imagePath’:new FormControl(recipeImagePath,Validators.required),
‘description’: new FormControl(recipeDescription,Validators.required),
‘材料’:recipeIngredients
}
);
}
}
}
発生したエラー:
core.js:6185 ERROR エラー: formGroup には FormGroup インスタンスが必要です。 1枚渡してください。
例：
あなたのクラスで：
this.myGroup = 新しい FormGroup({
firstName: new FormControl()
});
Function.missingFormException で (forms.js:2342)
FormGroupDirective._checkFormPresent で (forms.js:7724)
FormGroupDirective.ngOnChanges (forms.js:7514) で
FormGroupDirective.wrapOnChangesHook_inPreviousChangesStorage (core.js:26853) で
callHook (core.js:4690) で
callHooks (core.js:4650) で
executeInitAndCheckHooks (core.js:4591) で
selectIndexInternal (core.js:9621) で
Module.ɵɵadvance (core.js:9582) で
RecipeEditComponent_Template (recipe-edit.component.html:6) で
defaultErrorLogger @ core.js:6185
handleError @ core.js:6238
(匿名) @ core.js:42725
@ zone-evergreen.js:364 を呼び出す
@ zone-evergreen.js:123 を実行
runOutsideAngular @ core.js:41122
tick @ core.js:42722
(匿名) @ core.js:42562
@ zone-evergreen.js:364 を呼び出す
onInvoke @ core.js:41286
@ zone-evergreen.js:363 を呼び出す
@ zone-evergreen.js:123 を実行
@ core.js:41061 を実行
次 @ core.js:42559
schedulerFn @ core.js:36889
__tryOrUnsub @ Subscriber.js:183
次 @ Subscriber.js:122
_next @ Subscriber.js:72
次 @ Subscriber.js:49
次 @ Subject.js:39
エミット @ core.js:36851
checkStable @ core.js:41200
onHasTask @ core.js:41307
hasTask @ zone-evergreen.js:419
_updateTaskCount @ zone-evergreen.js:440
_updateTaskCount @ zone-evergreen.js:263
runTask @ zone-evergreen.js:184
DrainMicroTaskQueue @ zone-evergreen.js:569
invokeTask @ zone-evergreen.js:484
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647
私が試したこと：
StackOverflow のすべての解決策を試しましたが、解決策が見つかりませんでした
解決策 1
あなたはすでにそれを理解しているかもしれませんが、以下が答えです。
this.editMode=params でエラーになります[‘id’]!=ヌル;
this.editMode=params である必要があります[‘id’]!== ヌル;
[ad_2]
コメント