填充/修补角度反应形式的值

Question

我目前正在使用 angular 4 处理 crud 应用程序，我想知道，如何使用打开表单的按钮在同一行中解析的数据填充我的反应式表单，表单在 ngx 内-bootstrap modal，它应该与我在另一个按钮上添加新项目/对象的那个相同？

这是代码，我希望我能正确地向你提出我的问题......

我应该注意到我有一个用于添加新员工的工作表单，并且想要使用相同的表单，但想要使用我单击的对象的值填充表单/编辑按钮所在的行...（对不起由于缺乏更好的解释） 所以我有一类我的对象

        export class employee {
        UserId: string;
        FirstName: string;
        LastName: string;
        Email: string;
        }

在我的 app.component.ts 我有

     ngOnInit() {
    // populates table with current users in database onInit
    this.LoadAllEmployees();


    this.form = this.formBuilder.group({
        FirstName: [null, [Validators.required, Validators.minLength(2)]],
        LastName: [null, Validators.required],
        Email: [null, [Validators.required, Validators.email]],

    });

       }

    onSubmit() {
    if (this.form.valid) {
        console.log("Form Submitted!", this.form.value);
        this.form.reset();
        this.modalRef.hide();

    }
    else {
        this.validateAllFormFields(this.form)
    }
     }

    Save(myForm: NgForm) {
    this.GetDemoObject(myForm);
    this.AddEmployee(this.Demoemployee);
    }

    GetDemoObject(myForm: NgForm): employee {
    this.Demoemployee = new employee;
    this.Demoemployee.FirstName = myForm.value.FirstName;
    this.Demoemployee.LastName = myForm.value.LastName;
    this.Demoemployee.Email = myForm.value.Email;
            return this.Demoemployee;
     }

在我的 app.component.html 中有一个表格和 ngx-bootstrap 调用

      <table style="width:100%" class="table table-striped" 
     id="billing_history_table">
     <thead class="head">
        <tr>
            <th>Employee Name</th>
            <th>Mail</th>
            <th></th>

        </tr>
        </thead>
       <tbody>
        <tr *ngFor="let e of employeelist; let i = index ">
            <td>{{e.firstName + '&nbsp;' +e.lastName}}</td>
            <td>{{e.positionId}}</td>
            <td>{{e.email}}</td>
           <td><a (click)="openModal(template)"><span class="glyphicon 
             glyphicon-edit"></span></a></td>
           </tr>
           </tbody>
           </table>
       </div>

      <ng-template #template>

       <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-
     label="Close" (click)="modalRef.hide()"><span aria-hidden="true">&times;
    </span></button>
        <h4 class="modal-title" id="myModalLabel">Add new user</h4>
    </div>
    <div class="modal-body">
        <form class="form-horizontal" [formGroup]="form" #myForm="ngForm" 
   (ngSubmit)="onSubmit(myForm.value)">


            <div class="form-group" [ngClass]="displayFieldCss('FirstName')">
                <label for="FirstName" class="control-label required">First 
      name</label>
                <input type="text" id="FirstName" class="form-control" 
       formControlName="FirstName">

                <app-field-error-display 
      [displayError]="isFieldValid('FirstName')"
                                         errorMsg="First name is not valid!">
                </app-field-error-display>
            </div>

            <div class="form-group" [ngClass]="displayFieldCss('LastName')">
                <label for="LastName" class="control-label required">Last 
        name</label>
                <input type="text" id="LastName" class="form-control" 
       formControlName="LastName">
                <app-field-error-display 
        [displayError]="isFieldValid('LastName')"
                                         errorMsg="Last name is not valid!">
                </app-field-error-display>
            </div>

            <div class="form-group" [ngClass]="displayFieldCss('Email')">
                <label for="Email" class="control-label 
        required">Email</label>
                <input type="text" id="Email" class="form-control" 
       formControlName="Email">
                <app-field-error-display 
        [displayError]="isFieldValid('Email')"
                                         errorMsg="Email is not valid!">
                </app-field-error-display>
            </div>



            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-
         dismiss="modal" (click)="modalRef.hide()">Close</button>
                <button type="submit"
                        class="btn btn-primary" (click)="Save(myForm)">
                    Submit
                </button>

            </div>

        </form>
    </div>

       </div>
     </ng-template>

谁能给我一些指示，一些类似的例子或任何建议，请...

Answer 1

设置表单的值与创建表单的方式基本相同。在您的代码中声明表单字段FirstName: [null, [Validators.required, Validators.minLength(2)]],

实际上，您传递的第一个参数是表单字段的初始值（null）。您可以使用该方法，从父组件接收您的值并使用默认值创建表单...

通常我所做的是通过路由传递标识我的对象的参数（对象的 id），然后我从后端或存储中获取真实对象并根据我收到的参数填充表单

我使用fromControl中的setValue方法来设置表单域的值

this.userForm.get("name").setValue(user.name)

如果您需要更多信息，请告诉我

问候