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

Question

我正在使用 ng-template 作为模态，一旦模态打开，我想在其中自动填充值。但每次我的表单都是 undefined。我们有什么办法可以实现这一目标吗？

我的代码如下:模态代码。我通过点击页面上的按钮调用 updateProfile() 函数。我正在使用 ng-bootstrap 模式。

/****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

我为此表单添加了两种方式的数据绑定(bind)。

HTML 文件，

 <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>

typescript 文件，

    //variable starts here

    firstName:any;
    lastName:any;
    email:any;
    changePassword:any;
    currentPasswordText:any;
    newPasswordText:any;
    ConfirmPasswordText:any;

    data={
    "isActive": false,
    "role": "admin",
    "permissions": ["101", "202"],
    "_id": "5b39e0d0be883b029870bfc8",
    "firstName": "Anish",
    "lastName": "Kumar",
    "emailId": "anish@gmail.com",
    "password": "$2b$10$sQ1CCrtRy/Hvd3p3tje7t.A4.G7Jt2ayoETpniW8RlWSjkj1H77l2",
    "mobileNumber": "95990709xx",
    "createdAt": "2018-07-02T08:22:40.223Z",
    "__v": 0
};
    //variable ends here

    //Add this line for assign values to textbox wherever you want

    this.firstName=this.data.firstName;
    this.lastName=this.data.lastName;
    this.email=this.data.emailId;
    this.currentPasswordText=this.data.password; // the password has been encrypted you have to decrypt

  updateUser(formData){
        console.log("Form Value",formData.value); //here iam logged form value
  }

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

输出截图，

数据值已正确绑定(bind)我在这里测试的是示例屏幕截图。我使用未正确设计但数据绑定(bind)正确的示例 html 文件进行了测试。

希望它能解决您的问题。