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

Question

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

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

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

        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）。您可以使用该方法，从父组件接收from的值并使用默认值创建表单...

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

我使用fromControl中的setValue方法将值设置为表单字段

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

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

问候