提交时关闭模式

Question

我正在实施一个 crud 操作，我想在提交时关闭模式。如果我在提交按钮上使用数据关闭，它只会关闭按钮按钮，该功能不会发生。我希望功能也能在模态关闭时发生。

这是我的代码

component.html

<!-- The Modal -->

<div class="modal" id="myModal">
<div class="modal-dialog">
  <div class="modal-content"> 

    <!-- Modal Header -->
    <div class="modal-header">
      <h4 class="modal-title">Create User</h4>
      <button type="button" class="close" data-dismiss="modal">&times;</button>
    </div>

    <!-- Modal body -->
    <div class="modal-body">
        <!-- <form [formGroup]="userForm" (ngSubmit)="add(title.value,releaseYear.value))"> -->
            <form  #createForm="ngForm" (ngSubmit)=" createUser()" >

          <div class="form-group" [class.has-error]="firstname.invalid  && firstname.touched">
            <label for="text">First name</label><br>
            <input type="text"  class="form-control" [(ngModel)]="user.user.first_name" name="firstname" required #firstname="ngModel" >
            <span class="help-block" *ngIf="firstname.invalid && firstname.touched">
                *First Name is required
              </span>
          </div>
          <div class="form-group" [class.has-error]="lastname.invalid  && lastname.touched">
            <label for="text">Last name</label><br>
            <input type="text"  class="form-control" [(ngModel)]="user.user.last_name" name="lastname" required #lastname="ngModel">
            <span class="help-block" *ngIf="lastname.invalid && lastname.touched">
                *Last Name is required
              </span>

          </div>
          <div class="form-group" [class.has-error]="email.invalid  && email.touched">
            <label for="text">Email</label><br>
            <input type="text" class="form-control" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" [(ngModel)]="user.user.email" name="email" required #email="ngModel">
            <span class="help-block" *ngIf="email.invalid && email.touched">
              *Email is required
            </span> <br>
            <span class="help-block" *ngIf="email.errors?.pattern">
              *Invalid pattern
            </span> 
          </div>

              <div class="form-group" [class.has-error]="role.touched && role.invalid">
                <label for="role">Role</label>
                <select id="role" name="role"
                       class="form-control" required [(ngModel)]="user.role" #role="ngModel" >
                  <option *ngFor="let role of roles" [value]="role.name" >
                    {{role.name}}
                  </option>
                </select>
                <span class="help-block"
                    *ngIf="role.touched && role.invalid">
                     *Role is required
                </span>
            </div>  

          <button type="submit"  [disabled]="createForm.invalid" class="btn btn-primary">Submit</button>
        </form>
    </div>


  </div>
</div>

component.ts

//Create User
createUser() {
var data= this.user_data;
 let user:any = {};
   user["username"] = this.user.user.email
   user["first_name"] = this.user.user.first_name
   user["last_name"]= this.user.user.last_name
   user["email"]= this.user.user.email

   this.userData["user"] = user
   this.userData["role"] = this.user.role
   console.log(this.userData, "sending data")
   this.Authentication.create_user(this.userData).subscribe(res=>{
//  data.push(res);
   this.getUsersFromServices();  
//  console.log(this.getUsersFromServices);
   console.log('data received after creating user',res);   
   },
   err =>{
  console.error("Error creating user!"); 
// return Observable.throw(Error);

})

}

Answer 1

我强烈建议使用 angulars 反应式表单，您的表单将更容易重构和实现，因为几乎所有逻辑都位于组件类中，并使用简化示例进行演示。首先按照以下形式创建模板，当然你应该添加你的类，因为它看起来像是在使用引导程序。

<div class="modal" #myModal>
  <form  #createForm="ngForm" (ngSubmit)=" createUser()" >
    <div>
      <label for="text">First name</label><br>
      <input type="text" formControlName="name "required>
    </div>
  </form>
</div>

在组件类中使用创建表单

export class FormComponent {
  createForm: FormGroup;
  ViewChild('myModal') modal: ElementRef;

  constructor() {
    this.createForm = new FormGroup({
      name: new FormControl(null),
      email: new FormControl(null)
      // etc
    })
  }

  createUser() {
    const userData = {
      user: this.createForm.value;
      role: // where you get role from
    }
    this.Authentication.create_user(userData).subscribe(res => {
      this.modal.nativeElement.modal('hide');
    });
  }
}

使用ViewChild，您可以访问模式并且应该能够调用引导程序.modal('hide')。

Answer 2

您可以在 ts 文件中定义全局变量，以帮助您处理显示模式：

public isModalOn: boolean = false;

接下来将其作为条件添加到 modal html 元素中：

<div class="modal" id="myModal" *ngIf="isModalOn">
  ...
</div>

那么你的模态只会在变量为真时出现。您还需要在调用模态窗口的点击方法上将变量的值更改为true。

最后一步是在提交模式的方法结束时将变量值带回false：

createUser() {
  ...
  this.isModalOn = false;
}