單擊按鈕時自定義對話框驗證

Question

我正在使用具有搜索框和兩個下拉列表的對話框。我有一個「取消」按鈕和一個「確認」md-button按鈕。我想驗證點擊確認對話框。對話框HTML有md-dialog-content標記。整個HTML都在該標籤內。

對話框HTML

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <div md-dialog-content> 
       <h4>Find your IFSC Code</h4> 
       <div class="form-group"> 
        <input type="text" id="keyword" class="form-control" 
          name="bankname" [(ngModel)]="query" (keyup)="filter()" 
          (change)="bankChanged($event)" placeholder="BANK" /> 
       </div> 
       <div class="filter-select" *ngIf="filteredList.length > 0"> 
        <ul *ngFor="let item of filteredList" class="filter-select-list"> 
         <li class="artist-name"> 
          <a (click)="select(item)">{{item}}</a> 
         </li> 
        </ul> 
       </div> 
       <div class="form-group"> 
        <label for="sel2"></label> 
        <select class="form-control selectpicker" id="sel2" name ="city" 
          [(ngModel)]="city" (change)="cityChanged($event)"> 
         <option hidden="true" value="">Select City</option> 
         <option *ngFor="let city of cities">{{city}}</option> 
        </select> 
        <label for="sel3"></label> 
        <select class="form-control selectpicker" id="sel3" 
          name ="branch" [(ngModel)]="branch" 
          (change)="branchChanged($event.target.selectedIndex -1)"> 
         <option data-hidden="true" value="">Select Branch</option> 
         <option *ngFor="let branch of branches | keys">{{branch}}</option> 
        </select> 
       </div> 
       <div md-dialog-actions> 
        <button md-button (click)="onNoClick()" tabindex="-1"> 
         Cancel 
        </button> 
        <button md-button [md-dialog-close] ="this.modaldetails" tabindex="2"> 
         Confirm 
        </button> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

TS文件

import { Component, OnInit, Inject, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core'; 
import { MdDialog, MdDialogRef, MD_DIALOG_DATA } from '@angular/material'; 
import { Select2OptionData } from 'ng2-select2'; 
import { PaymentService } from '../../sharedService/payment.service'; 
import { IFSCService } from './ifscModal.service'; 
import { FormControl, NgForm } from '@angular/forms'; 
// import { SearchService } from '../../sharedService/search.service'; 
import { KeysPipe } from '../../second/keys.pipe'; 


//import { ModalService } from './modal/modal.service'; 

@Component({ 
    selector: 'app-modal', 
    host: { 
    '(document:click)': 'handleClick($event)', 
    }, 
    templateUrl: './ifscModal.component.html', 
    styleUrls: ['./ifscModal.component.css'], 

}) 
export class IFSCModalComponent { 
    public query = ''; 
    public filteredList = []; 
    public elementRef; 

    value; 
    str1; 
    str2; 
    banksArr; 
    dataArr; 
    bank; 
    city = []; 
    cities = []; 
    banks = []; 
    branch = []; 
    branches = []; 
    fields : boolean; 
    ifsc: String; 
    ifsccode: String; 
    getIFSCCode = {}; 
    // modaldetails: {}; 
    errBlock : boolean; 
    errMsg : string; 

    constructor(
    public dialogRef: MdDialogRef<IFSCModalComponent>, 
    @Inject(MD_DIALOG_DATA) public data: any, public paymentservice: PaymentService, 
    public ifscModalservice: IFSCService, myElement: ElementRef) { 


    this.elementRef = myElement; 
    } 

    ngOnInit() { 

    this.ifscModalservice.getBankList().subscribe(
     (banks_res) => { 
     this.banks = banks_res["bankList"]; 
     }, 
     (error) => console.log("error : " + error), 
    () => console.log('Complete getting Bank List') 
    ); 

    console.log(this.banks); 
    this.fields = false; 
    this. errBlock = false; 




    } 


    filter() { 
    console.log("query:" + this.query); 
    if (this.query !== "") { 
     this.filteredList = this.banks.filter(function (el) { 
     return el.toLowerCase().indexOf(this.query.toLowerCase()) > -1; 
     }.bind(this)); 

     if (this.filteredList.length == 0) { 
     this.filteredList = ["No Results Found!!"]; 
     } 
    } 
    else { 
     this.filteredList = this.banks; 
    } 
    } 

    select(item) { 

    this.query = item.toString(); 


    // console.log(this.modaldetails); 
    this.filteredList = []; 
    } 

    handleClick(event) { 
    var clickedComponent = event.target; 
    var inside = false; 
    do { 
     if (clickedComponent === this.elementRef.nativeElement) { 
     inside = true; 
     } 
     clickedComponent = clickedComponent.parentNode; 
    } while (clickedComponent); 
    if (!inside) { 
     this.filteredList = []; 
    } 
    } 
    bankChanged(val: any) { 
    let obj = this.banks; 
    console.log(obj, val); 
    if (obj.length !== 0) { 
     this.ifscModalservice.getCityList().subscribe(
     (cities_res) => { 
      this.cities = cities_res["cityList"]; 
     }, 
     (error) => console.log("error : " + error), 
     () => console.log('Complete getting city List') 
    ); 


    } 

    } 
    cityChanged(val: any) { 
    let obj = this.city; 
    console.log(obj, val); 

    this.ifscModalservice.getBranchList().subscribe(
     (branches_res) => { 
     this.branches = branches_res["branchList"]; 
     //this.ifsc = this.branches; 
     }, 
     (error) => console.log("error : " + error), 
    () => console.log('Complete getting branch List') 
    ); 
    } 


    branchChanged(val: any) { 
    let obj = this.branch; 
    console.log(obj, val); 

    //getIFSC() { 
    for (let i = 0; i < Object.keys(this.branches).length; i++) { 
     let j = val 
     this.ifsccode = this.branches[Object.keys(this.branches)[j]]; 

    } 
    console.log(this.ifsccode); 
    //} 

    // this.modaldetails = { 
    // "bank": this.query, 
    // "ifscCode": this.ifsccode 

    // } 
    this.Confirm(); 


    console.log("bank "+this.query.length); 
    console.log("city "+this.city.length); 
    console.log("branch "+this.branch.length); 
    console.log("ifsc "+this.ifsccode.length); 
    } 

    Confirm() { 

    if(this.query.length>0 && this.city.length>0 && this.branch.length>0) 
    { 
     this.ifscModalservice.saveDetails(this.query, this.city, this.branch, this.ifsccode); 
     this.errBlock = false; 
    } else { 
     this.errBlock = true; 
     this.errMsg = "Fill out all the fields to confirm." 
     console.log("button called"); 
    } 
    } 

    onNoClick() { 
    //console.log(this.modaldetails); 
    this.dialogRef.close(); 
    return this.ifscModalservice.returnDetails(); 
    // return this.modaldetails; 
    } 
    } 

https://stackblitz.com/edit/angular-qyrmve?file=app%2Fapp.module.ts

Answer 1

您可以confirm按鈕設置的點擊事件，然後可以編寫一個函數來驗證並返回true或根據您的情況爲假。

你的HTML按鈕

<button md-button (click)="validate()" [md-dialog-close] ="modaldetails" tabindex="2">Confirm </button> 

而在你的組件，你需要添加驗證函數來驗證。

validate() { 
    // all your validation should goes here 
    this. 
} 

這是手動驗證的最簡單方法。如果你想要的話，你也可以使用ReactiveForm等等