Question

我正在执行分类操作，我想在提交时关闭模式。如果我在提交按钮上使用了数据关闭功能，它将仅关闭按钮按钮，而该功能不会发生。我希望功能也要关闭，而模态也要关闭。

这是我的代码

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

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

public isModalOn: boolean = false;

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

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

然后，仅当变量为true时，才会出现模态。您还需要在单击模式窗口的click方法上将变量的值更改为true。

最后一步是在提交模态的方法结束时将变量值恢复为false：

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

Answer 2

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

<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')。

提交时关闭模式

2 个答案: