diet-web-ui/projects/admin/src/app/components/food-form/food-form.component.ts

import { ApiService } from "@admin/app/services";
import { Component, OnInit } from "@angular/core";
import { FormArray, FormBuilder, FormGroup } from "@angular/forms";
import { FormValidators } from "@cdk/validators";

@Component({
	selector: "app-food-form",
	templateUrl: "./food-form.component.html",
	styleUrls: ["./food-form.component.less"],
})
export class FoodFormComponent implements OnInit {
	constructor(private fb: FormBuilder, private api: ApiService) {}

	formGroup!: FormGroup;

	public globalEnum = this.api.globalEnum;

	get nutrition(): FormArray {
		return this.formGroup.get("nutrition") as FormArray;
	}

	ngOnInit(): void {
		this.formGroup = this.fb.group({
			id: this.fb.control("", [FormValidators.required()]),
			name: this.fb.control("", [FormValidators.required()]),
			type: this.fb.control("", [FormValidators.required()]),
			nutrition: this.fb.array([], [FormValidators.required()]),
		});
		this.api.getAllEnum().subscribe((r) => {});
	}

	nutritionChange(v: string, idx: number) {
		const nutrient = this.globalEnum.nutrient.find((f) => f.key === v);
		this.nutrition.at(idx).patchValue({
			measurement: nutrient?.measurement,
		});
	}

	createNutrition() {
		this.nutrition.push(
			this.fb.group({
				nutritionName: this.fb.control("", [FormValidators.required()]),
				nutritionNum: this.fb.control(0, [FormValidators.required()]),
				measurement: this.fb.control("", [FormValidators.required()]),
			})
		);
	}

	removeNutrition(idx: number) {
		this.nutrition.removeAt(idx);
	}
}