Angular-在编辑时填充表单数组输入 [英] Angular - Populate form array input on edit
本文介绍了Angular-在编辑时填充表单数组输入的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个数量字段和一个添加"按钮.单击按钮后,将添加数量的新字段以及删除"按钮以将其删除. 我已经使用了Form数组
我的代码如下
<div formArrayName="ingredients11">
<!-- loop throught units -->
<div *ngFor="let unit of recipeForm['controls'].ingredients11['controls']; let i = index ">
<div [formGroupName]="i">
<div class="form-group">
<label>Quantity</label>
<input type="text" class="form-control" formControlName="recipe_ingredient_quantity">
<div *ngIf="unit['controls'].recipe_ingredient_quantity.invalid" class="alert alert-danger">
<div *ngIf="unit['controls'].recipe_ingredient.errors.required">
Quantity is required.
</div>
</div>
</div>
<button class="btn btn-danger" *ngIf="recipeForm['controls'].ingredients11['controls'].length > 1" (click)="remove(i)">Delete</button>
</div>
</div>
<button class="btn btn-primary" (click)="add()">Add</button>
</div>
我还具有编辑功能,我想在其中预填充数量字段及其之前保存的用于编辑的值
我的代码如下:
<div formArrayName="ingredients11">
<!-- loop throught units -->
<div *ngFor="let unit of editrecipeForm['controls'].ingredients11['controls']; let i = index ">
<!-- row divider show for every nex row exclude if first row -->
<div *ngIf="editrecipeForm['controls'].ingredients11['controls'].length > 1 && i > 0" ><hr></div>
<div [formGroupName]="i" *ngFor="let ri of editingredientsarray;">
<div class="form-group">
<label>Ingredients</label>
<select class="form-control" formControlName="recipe_ingredient" >
<option value="">Select Ingredient</option>
<option *ngFor="let ingredient of ingredients | async" [value]="ingredient.id">
{{ingredient.name}}
</option>
</select>
<div *ngIf="unit['controls'].recipe_ingredient.invalid" class="alert alert-danger">
<div *ngIf="unit['controls'].recipe_ingredient.errors.required">
Ingredient is required.
</div>
</div>
</div>
<div class="form-group">
<label>Quantity</label>
<input type="text" class="form-control" formControlName="recipe_ingredient_quantity" [value]="ri.quantity">
<div *ngIf="unit['controls'].recipe_ingredient_quantity.invalid" class="alert alert-danger">
<div *ngIf="unit['controls'].recipe_ingredient.errors.required">
Quantity is required.
</div>
</div>
</div>
<button class="btn btn-danger" *ngIf="editrecipeForm['controls'].ingredients11['controls'].length > 1" (click)="removeEditIngredient(i)(i)">Delete Ingredient</button>
</div>
</div>
<button class="btn btn-primary" (click)="addEditIngredient()">Add New Ingredient</button>
</div>
但是该值未在输入字段中填充.任何人都可以指导
解决方案
您的状态配置错误:
export const Users = [
{
"id": "1",
"name": "aaa",
"technology": "1" //<------ Use id instead of names
},
{
"id": "2",
"name": "bbb",
"technology": "1,2" //<------ Use id instead of names
},
{
"id": "3",
"name": "ccc",
"technology": "1,3" //<------ Use id instead of names
}
]
工作演示 >
I have a quantity field and an "Add" button. On click of button new fields for quantity gets added as well as Delete button to remove it. I have used Form array for it
My code is as below
<div formArrayName="ingredients11">
<!-- loop throught units -->
<div *ngFor="let unit of recipeForm['controls'].ingredients11['controls']; let i = index ">
<div [formGroupName]="i">
<div class="form-group">
<label>Quantity</label>
<input type="text" class="form-control" formControlName="recipe_ingredient_quantity">
<div *ngIf="unit['controls'].recipe_ingredient_quantity.invalid" class="alert alert-danger">
<div *ngIf="unit['controls'].recipe_ingredient.errors.required">
Quantity is required.
</div>
</div>
</div>
<button class="btn btn-danger" *ngIf="recipeForm['controls'].ingredients11['controls'].length > 1" (click)="remove(i)">Delete</button>
</div>
</div>
<button class="btn btn-primary" (click)="add()">Add</button>
</div>
I also have an edit functionality, where I want to pre-populate the number of quantity fields and their values saved previously for edit
My code is as below:
<div formArrayName="ingredients11">
<!-- loop throught units -->
<div *ngFor="let unit of editrecipeForm['controls'].ingredients11['controls']; let i = index ">
<!-- row divider show for every nex row exclude if first row -->
<div *ngIf="editrecipeForm['controls'].ingredients11['controls'].length > 1 && i > 0" ><hr></div>
<div [formGroupName]="i" *ngFor="let ri of editingredientsarray;">
<div class="form-group">
<label>Ingredients</label>
<select class="form-control" formControlName="recipe_ingredient" >
<option value="">Select Ingredient</option>
<option *ngFor="let ingredient of ingredients | async" [value]="ingredient.id">
{{ingredient.name}}
</option>
</select>
<div *ngIf="unit['controls'].recipe_ingredient.invalid" class="alert alert-danger">
<div *ngIf="unit['controls'].recipe_ingredient.errors.required">
Ingredient is required.
</div>
</div>
</div>
<div class="form-group">
<label>Quantity</label>
<input type="text" class="form-control" formControlName="recipe_ingredient_quantity" [value]="ri.quantity">
<div *ngIf="unit['controls'].recipe_ingredient_quantity.invalid" class="alert alert-danger">
<div *ngIf="unit['controls'].recipe_ingredient.errors.required">
Quantity is required.
</div>
</div>
</div>
<button class="btn btn-danger" *ngIf="editrecipeForm['controls'].ingredients11['controls'].length > 1" (click)="removeEditIngredient(i)(i)">Delete Ingredient</button>
</div>
</div>
<button class="btn btn-primary" (click)="addEditIngredient()">Add New Ingredient</button>
</div>
But the value is not populating in input field. Can anyone please guide
解决方案
Your state is configured wrongly :
export const Users = [
{
"id": "1",
"name": "aaa",
"technology": "1" //<------ Use id instead of names
},
{
"id": "2",
"name": "bbb",
"technology": "1,2" //<------ Use id instead of names
},
{
"id": "3",
"name": "ccc",
"technology": "1,3" //<------ Use id instead of names
}
]
这篇关于Angular-在编辑时填充表单数组输入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文