如何使用选定的数据填充表单字段？

Question

我有一个需要添加、编辑、删除记录的数据库。

表单添加成功。

但是，如果我从显示的数据中选择一行，我希望填充表单，以便用户可以确认他们想要进行的编辑，或者这是要删除的正确记录。

我已经尝试过 document.getElementbyID - 但 Angular 不允许我设置值。

我可以得到记录的值。我只是无法将它们放入表单字段中。

component.html

      <span *ngFor="let top_page of top_page ; let i = index;"
      #nGForArray class="item-table">
        <div class="pageitem" (click)="fillform(top_page)">
          <div class="pagetitle col-3">{{top_page.title}}</div>
          <div class="pagedescription col-5">{{top_page.description}}</div>
        </div>
      </span>
      <form novalidate #formPage="ngForm"  class="col-12" > 
        <div class="col-5">
            <label>Title</label>
            <input type="text" class="form-control" ngModel id="formPageTitle" 
                  [value]="" name="title" #pageTitle="ngModel" >
        </div>
        <div class="col-10">
            <label>Description</label>
            <textarea rows="3" class="form-control" ngModel name="formPageDescription"
                  id="description" [value]="" name="description" #pageDescription="ngModel" ></textarea>
        </div>
      </form>
      <p>Title value: {{ pageTitle.value }}</p>
      <p>Form value: {{ formPage.value | json }}</p>

fillform()

fillform(single_page): void {
    this.isPageFormVisible = true;
    console.log(single_page);
    // none of the following work  
    // let tempTitle = (<HTMLInputElement>document.getElementById("formPageTitle")).value
    // tempTitle = single_page.title;
    // console.log(tempTitle);
    // this.formPage.value.pageTitle.value = single_page.title;
    // this.formPage.value.description.value  = single_page.description;
    // console.log(this.formPage.value.pageTitle.value);
    this.formPage.value.title.value = single_page.title.value;
    this.isCurrent = true;
  }

当用户单击一行（top_page 的 *ngFor）时，他们选择的字段应填充表单。

Answer 1

数据到表单的两种方式绑定将满足您的需求。将 html 中的表单部分更改为以下 .我只使用[(ngModel)]添加了两种方式绑定

 <form novalidate #formPage="ngForm"  class="col-12" > 
        <div class="col-5">
            <label>Title</label>
            <input type="text" class="form-control" [(ngModel)]="title" id="formPageTitle" 
                  [value]="" name="title" #pageTitle="ngModel" >
        </div>
        <div class="col-10">
            <label>Description</label>
            <textarea rows="3" class="form-control" [(ngModel)]="description" name="formPageDescription"
                  id="description" [value]="" name="description" #pageDescription="ngModel" ></textarea>
        </div>
      </form>

在您的控制器中添加以下内容

title:String;
description:String;

fillform(single_page): void {
    this.isPageFormVisible = true;
    this.title=single_page.title;
this.description=single_page.description;
    this.isCurrent = true;
  }