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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了填充/修补角度反应形式的值相关的知识,希望对你有一定的参考价值。

我正在努力使用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>

请任何人给我一些指示,类似的事情或任何建议的例子,请...

答案

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

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

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

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

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

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

问候

以上是关于填充/修补角度反应形式的值的主要内容,如果未能解决你的问题,请参考以下文章

以角度形式修补值

无法以角度反应形式添加验证器

以反应形式设置图像 url 在角度 2 中给出错误

显示角度反应形式错误消息的最佳方法,一个表单控制多个验证错误?

如何在角度 2 中以反应形式重置验证器?

第三方服务不填充角度反应表单值