时间戳

首页 > 解决方案 > 字段不为空，但显示模式 - Angular

javascript - 字段不为空，但显示模式 - Angular

问题描述

我正在学习 Angular，我在我的第 3 页字段中创建了：Article, Quantity, Limit.

如果每个字段为空，则会出现一个模式！

现在，我没有问题，模态看起来像我想要的那样。

现在，我有两个问题：

1-如果我的字段已完成，并且用户点击OK，我的模式出现？？我该如何改变这个？

2- 例如，您认为有可能quantity强制填写该字段。例如，如果字段quantity已完成且没有字段article和limit. 没有要显示的模式。

我被这两个问题困住了...

组件.html

    <br><br>
    
    <label for='quantity'>Article</label>
    <div class="input-group">
      <input type="text" class="form-control" id="article" name="article">
    </div>
    
    <label for='quantity'>Quantity</label>
    <div class="input-group">
      <input type="number" class="form-control" id="quantity" name="quantity">
    </div>
    
    <label for='quantity'>Limit</label>
    <div class="input-group">
      <input type="number" class="form-control" id="orderLimit" name="orderLimit">
    </div>
    
    <br>
    
    <div class="row">
      <div class="col-12">
        <button class="btn btn-lg btn-outline-primary" (click)="open(mymodal)"> ok  </button>
      </div>
    </div>
    
    <!-- Modal -->
    <ng-template #mymodal let-modal>
      <div class="modal-header">
        <h4 class="modal-title" id="modal-basic-title">Error message</h4>
        <button type="button" class="close" aria-label="Close button" aria-describedby="modal-title" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
      </div>
    
      <div class="table-responsive">
        <table class="table table-striped">
          <thead>
    
          </thead>
          <tbody>
            <td>Fields cannot be empty</td>
          </tbody>
        </table>
      </div>
    
    
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Ok</button>
      </div>
    </ng-template>

组件.ts

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'appBootstrap';

  closeResult: string | undefined;

  constructor(private modalService: NgbModal) {}

  open(content: any) {
    this.modalService
      .open(content, { ariaLabelledBy: 'modal-basic-title' })
      .result.then(
        result => {
          this.closeResult = `Closed with: ${result}`;
        },
        reason => {
          this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        }
      );
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return `with: ${reason}`;
    }
  }
}

如果你愿意，我可以把我的代码放在下面： https ://stackblitz.com/edit/angular-ivy-kr7cyd?file=src/app/app.component.ts

标签： javascriptangular

解决方案

1-如果我的字段已完成，并且用户单击“确定”，我的模式就会出现？？我该如何改变这个？

不，它不应该出现，因为你提到模式应该只在字段为空时打开。

2- 您认为可以强制填写字段数量。例如，如果字段数量是完整的，并且没有字段文章和限制。没有要显示的模式。

如果你愿意，你可以这样做。您可以使用ngModel和绑定每个输入属性，这些属性可以帮助您在用户更新它们时立即跟踪它们的值。当您打开或关闭模式时，您可以在组件方法中执行此操作，而不是使用视图引用变量关闭模式。

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'appBootstrap';
  article = 0, quantity = 0, orderLimit = 0;

  closeResult: string | undefined;

  constructor(private modalService: NgbModal) {}

  open(content: any) {
    this.modalService
      .open(content, { ariaLabelledBy: 'modal-basic-title' })
      .result.then(
        result => {
          this.closeResult = `Closed with: ${result}`;
        },
        reason => {
          this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        }
      );
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return `with: ${reason}`;
    }
  }

// this should be checked everytime when user clicks 'Ok'
  openModal() {
      // check if the values are '0'
      // make sure the values come in as Number
      if (orderLimit && article && quantity) {
          // show modal
      } else {
          // no need to show modal
      }

  }
}

 <label for='quantity'>Article</label>
    <div class="input-group">
      <input type="text" class="form-control" id="article" name="article" [(ngModel)]="article">
    </div>
    
    <label for='quantity'>Quantity</label>
    <div class="input-group">
      <input type="number" class="form-control" id="quantity" [(ngModel)]="quantity" name="quantity">
    </div>
    
    <label for='quantity'>Limit</label>
    <div class="input-group">
      <input type="number" class="form-control" id="orderLimit" [(ngModel)]="orderLimit" name="orderLimit">
    </div>

推荐阅读