Как заполнить поля формы выбранными данными?

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

Когда пользователь нажимает на строку (* ngFor из top_page), поля из их выбора должны заполнять форму.

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