FormControlName 未显示 angular 7 材料模态中的先前值

Question

我正在使用 mbd 材料设计 angular7 模板。 我有一组任务，每个任务都有一个编辑按钮。 当我单击“编辑”按钮时，会打开一个模式。 我希望此模态具有该字段的现有值。 我可以通过formControlName来完成。 但这并没有发生。我单击编辑按钮，然后单击该单击功能，在打开编辑模式之前分配值。 但是，它们不会填充模态中的文本框。 在控制台中，它出现在我单击模态按钮之前。 请帮忙

app.component.ts

  openEditModal(taskIdValue:number){

        console.log("Task Id Value = ", taskIdValue)
        for(var i = 0 ; i<this.result.length ; i++){
       if(this.result[i].taskId == taskIdValue ){
        console.log("this.result[i] = ", this.result[i])
        localStorage.setItem('editTaskId',this.result[i].taskId);

        localStorage.setItem('editTaskName',this.result[i]. taskName);


       }
      }

       this.editTaskId = localStorage.getItem('editTaskId')
      this.editTaskName = localStorage.getItem('editTaskName')

     $('#editModal').click();

     this.displayEdit = true;
       }

       editTask(){
    console.log("this.result.taskId", )


      }

应用程序组件.html

             <td>
                <button class = "btn btn-primary waves-light" 
       (click)="openEditModal(data.taskId)">Edit</button>
                <button type="button" id = "editModal" style = 
         "visibility:hidden" class="btn btn-primary waves-light" data- 
           toggle="modal" data-target="#EditExample"
                  (click)="centralLarge.show()" mdbWavesEffect>
                  Edit
                </button>
                <div mdbModal #centralLarge="mdb-modal" class="modal fade" 
           id="EditExample" tabindex="-1" role="dialog"
                  aria-labelledby="myModalLabel" aria-hidden="true" 
           [config]="{backdrop: true, ignoreBackdropClick: false}">
                  <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h4 class="modal-title w-100" id="myModalLabel">Edit 
           Data</h4>
                        <button type="button" class="close" data- 
           dismiss="modal" aria-label="Close" (click)="centralLarge.hide()">
                          <span aria-hidden="true">×</span>
                        </button>
                      </div>
                      <div class="modal-body" *ngIf = "displayEdit">
                        <div>
                          <div>
                            <form (ngSubmit)="editTask(editTaskForm.value)" 
         [formGroup]="editTaskForm">

                              <div class="form-group">
                                <label>Task Id : </label>
                                <input type="text" maxlength="100" 
        class="form-control" placeholder="Enter Task Id "
                                  formControlName="editTaskId" 
           [formControl]="editTaskForm.controls['editTaskId']"
                                  required>

                              </div>
                              <div class="form-group">
                                <label>Task Name : </label>
                                <input type="text" maxlength="1000" 
            class="form-control" placeholder="Enter Task Name "
                                  formControlName='editTaskName' 
            [formControl]="editTaskForm.controls['editTaskName']"
                                  required>

                              </div>

                              <div class="modal-footer">
                                <button type="button" class="btn btn- 
         secondary btn-sm waves-light" data-dismiss="modal"
                                  (click)="centralLarge.hide()" 
       mdbWavesEffect>Close</button>
                                <button type="submit" 
         [disabled]="!editTaskForm.valid" class="btn btn-primary btn-sm 
         waves- 
            light"
                                  (click)="centralLarge.hide()" 
          mdbWavesEffect>Save </button>
                              </div>
                            </form>
                          </div>

                        </div>
                      </div>

                    </div>
                  </div>
                </div>
              </td>

Answer 1

您最好将[(ngModel)]与您的对象一起使用，您的打字稿代码与您构建editTaskForm的方式不够清晰，因此我建议您将代码组织清楚，然后一步一步地使其工作。

问候！

Answer 2

您可以使用 this.formGroupname.patchValue({}) 设置先前的值，例如this.form.patchValue({ fullname1: this.fullname1, });