Gotam sharma Ответов: 0

Получение ошибки и попытался решить, но не получил никакого решения

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>





МОЙ ФАЙЛ.TS

импорт { компонент, функции OnInit } от '@угловых/центральных;
импорт { параметры, ActivatedRoute, маршрутизатор } от '@угловое/маршрутизатор';
импорт {FormGroup, FormControl, FormArray, Validators} из '@angular/forms';
импорт { RecipeService } из '../recipe.service';


@Компонент({
селектор: 'приложение-рецепт-редактирование',
templateUrl: './recipe-edit.component.html',
styleUrls: ['./recipe-edit.component.css']
})
экспорт класса RecipeEditComponent реализует OnInit {

идентификационный номер;
editMode=false;
recipeForm:FormGroup;

конструктор(private route:ActivatedRoute,private recipeService:RecipeService,
частный маршрутизатор:маршрутизатор) { }

ngOnInit(): void {
это.маршрут.параметры.подписаться(
(params:Params)=>{
this.id=+params['id'];
this.editMode=params['id']!=null;
console.log( this.editMode);
this.initForm();//мы загружаем его сюда, потому что когда наш маршрут изменится
//затем мы должны загрузить его(тогда по нему мы узнаем, что эта страница перезагружается)
}
);
}
получить контроль(){
return (<formarray>this.recipeForm.get('ingredients')).controls;
}

onSubmit(){
//const newRecipe=новый рецепт(
// это.recipeForm.значение['имя'],
// this.recipeForm.value['описание'],
// это.recipeForm.значение['продуктам'],
//this.recipeForm.value['ингредиенты']);
если(это.editMode){
this.recipeService.updateRecipe(this.id,this.recipeForm.value);
}еще{
this.recipeService.addRecipe(this.recipeForm.value);
}

это.и oncancel();
}
onAddIngredient(){
(<formarray> this.recipeForm.get('ингредиенты')).push(
новая Формгруппа({
'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(индекс:число){
(<formarray>this.recipeForm.get('ингредиенты')).removeAt(индекс);
}
частная инициализация() {
пусть recipeName=";
пусть recipeImagePath=";
пусть recipeDescription=";
пусть recipeIngredients=new FormArray([]);
если(это.editMode){
рецепт от const=это.recipeService.getRecipe(это.идентификатор);
recipeName=recipe.name;
recipeImagePath=recipe.imagePath;
recipeDescription=рецепт.описание;
если(рецепт['Ингредиенты']){
для(Пусть ингредиент рецепта.Ингредиенты){
recipeIngredients.толчок(
новая Формгруппа({
'name':новый FormControl(ingredient.name,валидаторы.требуется),
'amount':new FormControl(ingredient.amount,[Validators.required,Validators.pattern(/^[1-9]+[0-9]*$/)])
})
);
}
}
это.recipeForm=новый FormGroup(
{
'name':new FormControl(recipeName,Validators.required),
'imagePath':новый FormControl(recipeImagePath,Validators.required),
'description':новый FormControl(recipeDescription,Validators.required),
"ингредиенты":recipeIngredients
}
);

}
}



}







возникшая ошибка:

core.js:6185 ERROR ошибка: formGroup ожидает экземпляр FormGroup. Пожалуйста, передайте один из них.

Пример:






В вашем классе:

это.команды mygroup = новый FormGroup({
имя пользователя: new FormControl()
});
at 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)
at selectIndexInternal (core.js:9621)
в модуле.Advance (Core. js: 9582)
в RecipeEditComponent_Template (recipe-edit.component.html:6)
defaultErrorLogger @ core.js:6185
handleerror с @ сердечника.ДШ:6238
(анонимно) @ сердечника.ДШ:42725
зоне-вечнозеленые ссылаться на @.ДШ:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:41122
отметьте @ сердечника.ДШ:42722
(анонимно) @ сердечника.ДШ:42562
зоне-вечнозеленые ссылаться на @.ДШ:364
onInvoke @ core.js:41286
зоне-вечнозеленые ссылаться на @.ДШ:363
run @ zone-evergreen.js:123
run @ core.js:41061
next @ core.js:42559
schedulerFn @ core.js:36889
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:36851
checkStable @ core.js:41200
onHasTask @ core.js:41307
hasTask @ zone-evergreen.js:419
Зоне-вечнозеленые _updateTaskCount @.ДШ:440
Зоне-вечнозеленые _updateTaskCount @.ДШ: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 но не смог найти решение

0 Ответов