Question

我将ng-template用于模式，一旦模式打开，我想在其中自动填充值。但是我每次收到表单undefined时都会这样做。有什么办法可以做到这一点？

我的代码如下：模态代码。单击页面上的按钮后，我正在调用updateProfile()函数。我正在使用ng-bootstrap Modal。

/****Component.html*****/

<ng-template #profile let-c="close" let-d="dismiss">
    <div class="modal-header">
        <h4 class="modal-title">Profile update</h4>
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <p>Personal Information</p>
        <form novalidate #updateUserForm="ngForm" (ngSubmit)="updateUser(updateUserForm)">
            <div class="form-inline margin-bottom form-padding">
                <label class="col-sm-3">Mobile Number
                    <span class="asterisc"> *</span>
                </label>
                <label>{{data.mobileNumber}}</label>
            </div>
            <div class="form-inline margin-bottom form-padding">
                <label class="col-sm-3">First Name
                    <span class="asterisc"> *</span>
                </label>
                <input type="text" required ngModel required name="firstName" class="form-control" value="{{data.firstName}}">
            </div>
            <div class="form-inline margin-bottom form-padding">
                <label class="col-sm-3">Last Name
                    <span class="asterisc"> *</span>
                </label>
                <input type="text" required ngModel name="lastName" class="form-control" value="{{data.lastName}}">
            </div>
            <div class="form-inline margin-bottom form-padding">
                <label class="col-sm-3">Email
                    <span class="asterisc"> *</span>
                </label>
                <input type="text" required ngModel name="email" class="form-control" value="{{data.emailId}}">
            </div>
            <div class="form-inline container">
                <input type="checkbox" [(ngModel)]="changePassword" name="changePassword" class="form-control checkmark"> Change Password
            </div>
            <div id="updatePassword" *ngIf="changePassword">
                <div class="form-inline margin-bottom form-padding">
                    <label class="col-sm-3">Current Password
                        <span class="asterisc"> *</span>
                    </label>
                    <input type="password" required ngModel minlength="6" name="currentPassword" class="form-control" [(ngModel)]="currentPasswordText"
                        #currentPassword="ngModel">
                    <div *ngIf="currentPassword.invalid && (currentPassword.dirty || currentPassword.touched || currentPassword.errors.minlength)"
                        class="alert alert-danger">
                        <div *ngIf="currentPassword.errors.required">
                            Password is required.
                        </div>
                        <div *ngIf="currentPassword.errors.minlength">
                            Password must be at least 6 characters long.
                        </div>
                    </div>
                </div>
                <div class="form-inline margin-bottom form-padding">
                    <label class="col-sm-3">New Password
                        <span class="asterisc"> *</span>
                    </label>
                    <input type="password" required ngModel minlength="6" name="newPassword" class="form-control" [(ngModel)]="newPasswordText"
                        #newPassword="ngModel">
                    <div *ngIf="newPassword.invalid && (newPassword.dirty || newPassword.touched || newPassword.errors.minlength)" class="alert alert-danger">
                        <div *ngIf="newPassword.errors.required">
                            Password is required.
                        </div>
                        <div *ngIf="newPassword.errors.minlength">
                            Password must be at least 6 characters long.
                        </div>
                    </div>
                </div>
                <div class="form-inline margin-bottom form-padding">
                    <label class="col-sm-3">Confirm Password
                        <span class="asterisc"> *</span>
                    </label>
                    <input type="password" required ngModel minlength="6" name="ConfirmPassword" class="form-control" [(ngModel)]="ConfirmPasswordText"
                        #ConfirmPassword="ngModel">
                    <div *ngIf="ConfirmPassword.invalid && (ConfirmPassword.dirty || ConfirmPassword.touched || ConfirmPassword.errors.minlength)"
                        class="alert alert-danger">
                        <div *ngIf="ConfirmPassword.errors.required">
                            Password is required.
                        </div>
                        <div *ngIf="newPasswordText !== '' && ConfirmPasswordText !== newPasswordText" class="alert alert-danger">
                            Password didnot match
                        </div>
                        <div *ngIf="ConfirmPassword.errors.minlength">
                            Password must be at least 6 characters long.
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <input type="submit" class="btn btn-primary" value="SAVE">
            </div>
        </form>
    </div>
    <!-- <div class="modal-footer">
            <button type="button" class="btn btn-priamary set-col" (click)="c('Close click')">Save</button>
        </div> -->
</ng-template>

/*typescript file**/





openProfile(profile){
    let id = '5b39e0d0be883b029870bfc8';// hardcoded value
    this.modalService.open(profile, { size: 'lg' });
    this._service.getUserProfile(id).subscribe((res)=>{
      console.log(res);
      this.data = res;
      //this.form.controls['firstName'].setValue(res['firstName']);
      //this.updateUserForm['']
      this.UpdateUserForm.patchValue({
        'firstName':this.data.firstName 
      })

    },(error)=>{
      console.log(error)
    });
  }

/ *响应* /

{
    "isActive": false,
    "role": "admin",
    "permissions": [
        "101",
        "202"
    ],
    "_id": "5b39e0d0be883b029870bfc8",
    "firstName": "test",
    "lastName": "test",
    "emailId": "test@gmail.com",
    "password": "$2b$10$sQ1CCrtRy/Hvd3p3tje7t.A4.G7Jt2ayoETpniW8RlWSjkj1H77l2",
    "mobileNumber": "xxxxxxxxxx",
    "createdAt": "2018-07-02T08:22:40.223Z",
    "__v": 0
}

Answer 1

Iam为此表单添加了两种方式的数据绑定。

HTML文件

holder.item.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
    mRecyclerClickInterface.onClick(view, position);
   }
});

打字稿文件

 <div class="modal-body">
    <p>Personal Information</p>
    <form novalidate #updateUserForm="ngForm" (ngSubmit)="updateUser(updateUserForm)">
        <div class="form-inline margin-bottom form-padding">
            <label class="col-sm-3">Mobile Number
                <span class="asterisc"> *</span>
            </label>
            <label>{{data.mobileNumber}}</label>
        </div>
        <div class="form-inline margin-bottom form-padding">
            <label class="col-sm-3">First Name
                <span class="asterisc"> *</span>
            </label>
            <input type="text" required [(ngModel)]="firstName" required name="firstName" class="form-control">
        </div>
        <div class="form-inline margin-bottom form-padding">
            <label class="col-sm-3">Last Name
                <span class="asterisc"> *</span>
            </label>
            <input type="text" required [(ngModel)]="lastName" name="lastName" class="form-control">
        </div>
        <div class="form-inline margin-bottom form-padding">
            <label class="col-sm-3">Email
                <span class="asterisc"> *</span>
            </label>
            <input type="text" required [(ngModel)]="email" name="email" class="form-control">
        </div>
        <div class="form-inline container">
            <input type="checkbox" [(ngModel)]="changePassword" name="changePassword" class="form-control checkmark"> Change Password
        </div>
        <div id="updatePassword" *ngIf="changePassword">
            <div class="form-inline margin-bottom form-padding">
                <label class="col-sm-3">Current Password
                    <span class="asterisc"> *</span>
                </label>
                <input type="password" required minlength="6" name="currentPassword" class="form-control" [(ngModel)]="currentPasswordText">
            </div>  
            <div class="form-inline margin-bottom form-padding">
                <label class="col-sm-3">New Password
                    <span class="asterisc"> *</span>
                </label>
                <input type="password" required  minlength="6" name="newPassword" class="form-control" [(ngModel)]="newPasswordText">                    
            </div>
            <div class="form-inline margin-bottom form-padding">
                <label class="col-sm-3">Confirm Password
                    <span class="asterisc"> *</span>
                </label>
                <input type="password" required minlength="6" name="ConfirmPassword" class="form-control" [(ngModel)]="ConfirmPasswordText">                    
            </div>
        </div>
        <div class="modal-footer">
            <input type="submit" class="btn btn-primary" value="SAVE">
        </div>
    </form>
</div>

注意：-我已删除您的验证，请添加您的验证部分。

输出屏幕截图，

数据值已正确绑定iam经过测试，这是示例屏幕快照.iam使用示例html文件设计得不好，但数据绑定正确。

我希望它能解决您的问题。

如何设置表单字段值ng-Bootstrap模型的值

1 个答案: