1

我有一个数量字段和一个“添加”按钮。单击按钮时，会添加数量的新字段以及删除按钮以将其删除。我已经为它使用了表单数组

我的代码如下

<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>

但是该值未填充在输入字段中。任何人都可以请指导

4

2 回答 2

1

您的状态配置错误：

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
  }
]

工作演示

于 2018-08-02T11:41:17.473 回答
0

似乎您正在绑定您的数量字段，ri.quantity因此您必须在编辑函数中传递此对象并更改同一对象中的值，即ri在您的组件 ts 文件中，例如，

edit(ri){
    ri.quantity=SOME_NEW_VALUE_HERE;
}

更新，用于在选项中添加选定的属性，

<option ... [selected]="ingredient.id==ri.ingredient">
   {{ingredient.name}}
</option>
于 2018-08-01T05:09:02.803 回答