Question

我使用Angular Reactive表单，我有一个下拉列表和一个输入字段。我有一个名为Category: {id, name, parent}的对象列表。该列表显示在每行都有edit button/link的表中。当单击特定行的edit link时，我希望该行中的数据填充输入字段，并且选择选项将被自动选择。

例如，这是我的表单和组件：

<form [formGroup]="childCategoryForm" (ngSubmit)="saveOrUpdateChildCategory(childCategoryForm.value)" autoComplete="off">
          <div class="form-group row" [ngClass]="{'error': !validateParentCategory()}">
            <label class="col-form-label col-md-2" for="parent">Parent Category</label>
            <div class="col-md-6">
              <select [(ngModel)]="selectedValue" class="form-control" formControlName="parent" name="parent" id="parent">
                <option [ngValue]=null>--- select parent category ---</option>
                <option [ngValue]="parent" *ngFor="let parent of parentCategories">{{parent.name}}</option>
              </select>
            </div>
          </div>
          <div class="form-group row" [ngClass]="{'error': !validateCategoryName()}"> <!--  && categoryForm.controls.name?.errors.pattern -->
            <label class="col-form-label col-md-2" for="name">Category Name</label>
            <!--em *ngIf="!validateCategoryName()">Required</em>
            <em *ngIf="!validateCategoryName()">Required</em-->
            <div class="col-md-6">
              <input type="text" formControlName="name" name="name" class="form-control" id="name" placeholder="Category name..." />
            </div>
          </div>
          </div>
          <div class="form-group row" *ngIf="childCategoryFormEditMode">
            <label class="col-form-label col-md-2" for="name"></label>
            <div class="btn-toolbar col-md-6">
              <button type="button" (click)="cancelEditChildrenCategory()" class="btn btn-outline-secondary btn-sm mr-2">Cancel edit</button>
              <button type="submit" class="btn btn-info btn-sm">Submit edit</button>
            </div>
          </div>
        </form>



<table class="table table-striped">
            <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Name</th>
              <th scope="col">Parent</th>
              <th scope="col">Edit</th>
              <th scope="col">Delete</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let child of childrenCategories; index as i">
              <th scope="row">{{i+1}}</th>
              <td>{{child.name}}</td>
              <td>{{child.parent['name']}}</td>
              <td class="text-primary"><a class="deco-none" (click)="editChildCategory(child)"><i class="fa fa-edit"></i>Edit</a></td>
              <td class="text-danger"><a class="deco-none" (click)="deleteCategory(child)" ><i class="fa fa-remove"></i>Delete</a></td>
            </tr>
            </tbody>
          </table>

当用户单击“编辑”链接时，我希望该行中的内容填充上面的表单。表示将使用父列来选择表单中的相应选择选项。

该组件如下所示：

export class AddCategoryComponent implements OnInit {
  name: FormControl;
  parent: FormControl;
  childCategoryForm: FormGroup;
  selectedValue: any;

ngOnInit() {
    this.parent = new FormControl(this.selectedValue);
    this.name = new FormControl('');
    this.childCategoryForm = new FormGroup({name: this.name, parent: this.parent});
  }

// THIS IS THE MAIN FUNCTION WHERE I AM TRYING TO DYNAMICALLY SELECT AN  OPTION BASED ON THE VALUES IN THE ROW CLICKED BY THE USER. THIS IS THE FUNCTION THAT IS CALLED WHEN A USER CLICKS ON THE EDIT LINK

 editChildCategory(category: Category) {
    this.selectedValue = category.parent;
    // this.childCategoryForm.setValue({name: category.name, parent: category.parent});
    this.childCategoryForm.controls['name'].setValue(category.name);
    this.childCategoryForm.controls['parent'].setValue(category.parent['name']);
     this.selectedValue = category.parent['name'];
  }

}

上面的函数中的某些代码在注释中，因为我尝试了不同的事情，但是它不起作用。

Answer 1

对我来说，如何设置select的值prop是prob。将html更改为以下内容：

<option [ngValue]="parent.name" *ngFor="let parent of parentCategories">

因为，父对象不是字符串值，所以以后单击编辑链接时可以与之匹配的对象。希望这会有所帮助！

Angular下拉列表问题-单击链接后动态选择一个选项

1 个答案: