/Javascript/AngularJS/Angular patchValue dynamically

Angular patchValue dynamically

@Component({ selector: "app-edit-recipe", templateUrl: "./edit-recipe.component.html", styleUrls: ["./edit-recipe.component.css"], }) export class EditRecipeComponent implements OnInit { editRecipeF!: FormGroup; recipeId: any; selectedRecipe!: Recipe; constructor( private formBuilder: FormBuilder, private recipesService: RecipesService, private route: ActivatedRoute ) {} ngOnInit() { this.recipeId = this.route.snapshot.params["id"]; this.editRecipeF = this.formBuilder.group({ recipeDetails: this.formBuilder.group({ title: ["", Validators.required], imageUrl: ["", Validators.required], duration: ["", Validators.required], calories: ["", Validators.required], }), ingredients: this.formBuilder.array([this.createIngFormGroup()]), }); this.recipesService.fetchRecipeDetails(this.recipeId).subscribe( (selectedRecipeDetails) => { this.selectedRecipe = selectedRecipeDetails; this.editRecipeF.patchValue({ recipeDetails: { title: this.selectedRecipe.title, imageUrl: this.selectedRecipe.imageUrl, duration: this.selectedRecipe.duration, calories: this.selectedRecipe.calories, }, }); const ing = this.editRecipeF.get("ingredients") as FormArray; for (let ingredient of this.selectedRecipe.ingredients) { ing.patchValue([ { name: ingredient.ingName, qty: ingredient.ingQty, qtyUnit: ingredient.ingQtyUnit, imageUrl: ingredient.ingImageUrl, }, ]); } }, (error) => { console.log(error); } ); } private createIngFormGroup() { return new FormGroup({ name: new FormControl("", Validators.required), qty: new FormControl("", Validators.required), qtyUnit: new FormControl("", Validators.required), imageUrl: new FormControl("", Validators.required), }); } public getControls() { return (<FormArray>this.editRecipeF.get("ingredients")).controls; } public onAddIngredients() { const ingredients = this.editRecipeF.get("ingredients") as FormArray; ingredients.push(this.createIngFormGroup()); } public onSubmitEditRecipeForm() { if (this.editRecipeF.valid) { console.log(this.editRecipeF.value); this.recipesService .editRecipe(this.editRecipeF.value, this.recipeId) .subscribe( (success) => {}, (error) => { console.log(error); } ); } } }

Source: angularquestions.com

Similar codes

5 votes425 views3 answers
Angular refresh component on button click
Javascript AngularJS
0 vote282 views1 answer
Binding variable with td in angular site:stackoverflow.com
Javascript AngularJS
0 vote316 views1 answer
Vs 2019 how to publish angular environment prod
Javascript AngularJS
0 vote269 views1 answer
ERROR in ./src/app/pages/auth/auth.module.ngfactory.js Module not found: Error: Can't resolve '@angular/material/core/index'
Javascript AngularJS
0 vote280 views1 answer
Refresh a kendo ui widget, when options on AngularJS $scope change
Javascript AngularJS
0 vote276 views1 answer
Angular set attribute value dynamically
Javascript AngularJS
0 vote267 views4 answers
Npm angular mobile nav
Javascript AngularJS
0 vote292 views1 answer
Cast string to int angular
Javascript AngularJS
0 vote233 views1 answer
Angular 9 dockerfile
Javascript AngularJS
1 vote438 views3 answers
Error referenceerror $ is not defined in angular 10
Javascript AngularJS