如何解决如何在Angular 10的FormGroup中使用FormArray
我正在创建一个包含普通输入和一组成分的表单。
这是我第一次使用FormArray创建表单并且卡住了。
在控制台上:
这是我尝试过的:
export class RecipeAddComponent implements OnInit {
recipe: IRecipe;
recipeForm: FormGroup;
ingredients: FormArray;
ingredientForm: FormGroup;
validationErrors: string[] = [];
constructor(private recipeService: RecipeService,private fb: FormBuilder,private router: Router) {
}
ngOnInit(): void {
this.intitializeRecipeForm();
}
intitializeRecipeForm() {
this.recipeForm = this.fb.group({
name: ['',Validators.required],preparationTime: ['',description: ['',ingredients: this.fb.array([this.createIngredient()])
});
}
createIngredient(): FormGroup {
return this.fb.group({
name: '',amount: ''
});
}
addRecipe() {
this.recipeService.addNewRecipe(this.recipeForm.value).subscribe(response => {
this.router.navigateByUrl('/recipes');
},error => {
this.validationErrors = error;
})
}
addIngredient(): void {
this.ingredients = this.recipeForm.get('ingredients') as FormArray;
this.ingredients.push(this.createIngredient());
}
}
HTML
<div class="container">
<form class="p-5 col-md-5 col-sm-8 formShadow" [formGroup]='recipeForm' (ngSubmit)="recipeForm.valid && addRecipe()"
autocomplete="off">
<p class="h4 mb-4">Add new recipe</p>
<app-text-input [formControl]='recipeForm.controls["name"]' [label]='"Name"'></app-text-input>
<app-text-input [formControl]='recipeForm.controls["preparationTime"]' [label]='"Preparation Time"'
[type]='"number"'>
</app-text-input>
<app-text-input [formControl]='recipeForm.controls["description"]' [label]='"Description"'></app-text-input>
<div class="form-group">
<ng-container formArrayName="ingredients">
<div *ngFor="let ingredient of ingredients.controls; index as i">
<ng-container [formGroupName]="i">
<input formControlName="name" class="form-control" />
<input formControlName="amount" class="form-control" />
</ng-container>
</div>
</ng-container>
</div>
<div class="row mt-5" *ngIf="validationErrors.length > 0">
<ul class="text-danger">
<li *ngFor="let error of validationErrors">
{{error}}
</li>
</ul>
</div>
<div class="form-group text-center">
<button [disabled]="!recipeForm.valid" class="btn btn-outline-dark mr-2" type="submit">Register</button>
<button class="btn outline-light mr-2" (click)="cancel()">Cancel</button>
</div>
</form>
</div>
任何提示都会有所帮助。这是我第一次这样做。
解决方法
在这种情况下,您好像有一个父类别,并且可以有多个子类别,这些子类别可以称为子类别表单数组。根据用户要求,可以有任意数量的子类别。 因此,可以按以下方式设计表单组和表单数组:-
constructor(
private formBuilder: FormBuilder
) { }
this.categoryForm = this.formBuilder.group({
name: [undefined,[Validators.required]],image: [undefined,subCategories: this.formBuilder.array([
]),});
要按需添加新的子类别,您可以按照以下步骤操作
addNewFieldSubCat() {
(<FormArray>this.categoryForm.get("subCategories")).push(this.formBuilder.group({
name: [undefined,[]],}));
}
要删除现有的子类别行,您可以执行以下操作:-
public removeSubCategory(index) {
(<FormArray>this.categoryForm.get("subCategories")).removeAt(index);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。