0
コンポーネントhtmlファイルに入力テキストボックスがあります。そのテキストボックスの値は、そのテキストボックスに入力しているテキストか、md-dialogを使用したカスタムダイアログボックスから来る必要があります私はダイアログボックスから値を取得し、ダイアログボックスから確認リンクをクリックしているときにテキストボックスに表示することができます。角度2のカスタムダイアログボックス
問題は、ダイアログボックスからテキストボックスに値を表示した後で、再度ダイアログボックスを開いてキャンセルをクリックするとダイアログが閉じられますが、texboxの値は消えます。テキストボックスに値が表示された後、何もせずにダイアログボックスをもう一度開いて閉じている場合、テキストボックスに値を保持したいと思います。
これを達成する方法は？
マイcallingmodalコンポーネントコード：
import { Component, OnInit,Inject ,Input,ElementRef } from '@angular/core';
import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
import {SearchService} from '../sharedService/search.service';
import {ModalComponent} from './modal/modal.component';
import { Subject } from 'rxjs/Subject';
import {Observable} from 'rxjs/Observable';
import { FormControl ,NgForm} from '@angular/forms';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';
import{BankdetailsService} from './modal/bankdetails.service';
@Component({
selector: 'app-cardDetails',
host: {
'(document:click)': 'handleClick($event)',
},
templateUrl: './cardDetails.component.html',
styleUrls: ['./cardDetails.component.css'],
providers: [SearchService]
})
export class CardDetailsComponent implements OnInit {
public query = '';
public filteredList = [];
public elementRef;
public banknames = ["ABHYUDAYA COOPERATIVE BANK LIMITED","ABU DHABI COMMERCIAL BANK","AHMEDABAD MERCANTILE COOPERATIVE BANK","AIRTEL PAYMENTS BANK LIMITED","AKOLA JANATA COMMERCIAL COOPERATIVE BANK","ALLAHABAD BANK","ALMORA URBAN COOPERATIVE BANK LIMITED","ANDHRA BANK","ANDHRA PRAGATHI GRAMEENA BANK","APNA SAHAKARI BANK LIMITED","AUSTRALIA AND NEW ZEALAND BANKING GROUP LIMITED","AXIS BANK","B N P PARIBAS","BANDHAN BANK LIMITED","BANK INTERNASIONAL INDONESIA","BANK OF AMERICA","BANK OF BAHARAIN AND KUWAIT BSC","BANK OF BARODA","BANK OF CEYLON","BANK OF INDIA","BANK OF MAHARASHTRA","BANK OF TOKYO MITSUBISHI LIMITED","BARCLAYS BANK","BASSEIN CATHOLIC COOPERATIVE BANK LIMITED","BHARAT COOPERATIVE BANK MUMBAI LIMITED","CANARA BANK","CAPITAL SMALL FINANCE BANK LIMITED","CATHOLIC SYRIAN BANK LIMITED","CENTRAL BANK OF INDIA","CHINATRUST COMMERCIAL BANK LIMITED","CITI BANK","CITIZEN CREDIT COOPERATIVE BANK LIMITED","CITY UNION BANK LIMITED","COMMONWEALTH BANK OF AUSTRALIA","CORPORATION BANK","CREDIT AGRICOLE CORPORATE AND INVESTMENT BANK CALYON BANK","CREDIT SUISEE AG","DCB BANK LIMITED","DENA BANK","DEOGIRI NAGARI SAHAKARI BANK LTD. AURANGABAD","DEPOSIT INSURANCE AND CREDIT GUARANTEE CORPORATION","DEUSTCHE BANK"]
submitted = false;
onSubmit() { this.submitted = true; }
bankdata: any[];
ifsc : any;
queryField: FormControl = new FormControl();
searchTerm = new Subject<string>();
constructor(private searchService: SearchService,public bankdetailservice : BankdetailsService, public dialog: MdDialog,myElement: ElementRef) {
//this.searchService.search(this.searchTerm)
//.subscribe(results => {
//this.results = results.results;
//});
this.elementRef = myElement;
}
ngOnInit() {
this.queryField.valueChanges
.debounceTime(200)
.distinctUntilChanged()
.switchMap((queryField) => this.searchService.search(queryField))
.subscribe(data => { if (data.status === 400) { return; }
else {
this.bankdata = data.data;
console.log(typeof(this.bankdata));
}
}
);
}
filter() {
if (this.query !== ""){
this.filteredList = this.banknames.filter(function(el){
return el.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
}.bind(this));
}else{
this.filteredList = [];
}
}
select(item){
this.query = item;
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 = [];
}
}
//selectvalue(bnkname){
//}
openDialog(): void {
let dialogRef = this.dialog.open(ModalComponent, {
width: '250px',
data: { ifsc: this.ifsc }
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
this.ifsc = result ;
});
}
}
carddetailsが
<app-header></app-header>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h3 style="font-family: Lucida Console serif;color: rgba(0, 0, 0, 0.71);font-size: 17px;text-align: left;">Enter Payment Details</h3>
<p id ="plain">We require your bank details to transfer the <br>claim amount to you.<br>
<form (ngSubmit)="onSubmit()" #carddetailform = "ngForm" id="ngForm">
<div class="form-group">
<input type="text" class="form-control" id="name" name ="name" placeholder="Full Name" required><br><br></div>
<div class="form-group">
<input type="text" class="form-control" id="ifsc" name ="ifsc" [(ngModel)] = ifsctext [value]="ifsc || '' " placeholder="IFSC Code" required></div>
<p id ="message">Don't know your IFSC Code? That's okay, <a (click)="openDialog()">Find out here!</a><br><br>
<!--<input type = "search" id="bank" (keyup)="searchTerm.next($event.target.value)" placeholder="BANK">
<ul *ngIf="results">
<li *ngFor="let result of results | slice:0:9">
{{ result.name }}
</li>
</ul>-->
<!-- <section class="filter-wrapper"> -->
<!--<div class="keyword-wrapper">-->
<div class="form-group">
<input type="text" id="keyword" class="form-control" name ="bankname" [(ngModel)]=query (keyup)="filter()" placeholder="BANK" [ngModelOptions]="{standalone: true}"/>
</div>
<!--</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>
<!-- <button type="submit" [disabled]="!carddetailform.form.valid" form="ngForm" id ="button"class="form-control" routerLink="/endOfSurvey" >Send Bank Details</button> -->
<button type="submit" id ="button" class="form-control" routerLink="/endOfSurvey" >Send Bank Details</button>
</form>
</div></div></div>
モーダルcomponent.ts
import { Component, OnInit ,Inject,Input,Output,EventEmitter } from '@angular/core';
import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
import { Select2OptionData } from 'ng2-select2';
import {BankdetailsService} from './bankdetails.service';
//import { ModalService } from './modal/modal.service';
@Component({
selector: 'app-modal',
templateUrl: './modal.component.html',
styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {
banks = {};
branch : any;
city : any;
ifsc : any;
ifsctext;
constructor(
public dialogRef: MdDialogRef<ModalComponent>,
@Inject(MD_DIALOG_DATA) public data: any, public bankdetailsservice : BankdetailsService) { }
ngOnInit() {
this.bankdetailsservice.getBankInfo().subscribe(
(data) => {
this.banks = data.data;
console.log(this.banks);
},
(error) => console.log("error : " + error),
() => console.log('completed')
);
}
firstDropDownChanged(val: any) {
let obj = this.banks["BANK"];
console.log(val, obj);
if (!obj) return;
if (obj == "YES BANK") {
this.city = this.banks["CITY"];
console.log(this.city);
}
}
secondDropDownChanged(val: any) {
let obj = this.banks["CITY"];
console.log(val, obj);
if (!obj) return;
if (obj == "SURAT") {
this.branch = this.banks["BRANCH"];
console.log(this.branch);
}
if(this.branch)
this.ifsc = this.banks["IFSC"];
console.log(this.ifsc);
}
onNoClick(): void {
this.dialogRef.close();
}
}
モーダル成分をcomponent.html
cardDetails.component.ts .htmlを
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div md-dialog-content>
<h3>Find your IFSC Code</h3>
<div class="form-group">
<label for="sel1"></label>
<select class="form-control selectpicker" id="sel1" (change)="firstDropDownChanged($event.target.selectedIndex -1)">
<option data-hidden="true" value="">Bank Name</option>
<option>
{{this.banks.BANK}}
</option>
</select>
<label for="sel2"></label>
<select class="form-control selectpicker" id="sel2" (change)="secondDropDownChanged($event.target.selectedIndex -1)">
<option data-hidden="true" value="">City</option>
<option>
{{this.city}}
</option>
</select>
<label for="sel3"></label>
<select class="form-control selectpicker" id="sel3">
<option data-hidden="true" value="">Branch</option>
<option>
{{this.branch}}
</option>
</select>
</div>
<div md-dialog-actions>
<button md-button (click)="onNoClick()" tabindex="-1">Cancel</button>
<button md-button [md-dialog-close]="this.ifsc " tabindex="2">Confirm</button>
</div>
</div>
</div>
</div>
</div>
bankdetailservice.ts
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
@Injectable()
export class BankdetailsService {
ifsctext ;
baseUrl: string = 'https://api.techm.co.in/api/getbank/YES%20BANK/ASSOCIATE%20COOP%20BANK%20UMARWADA';
constructor(private http: Http) {
}
getBankInfo() {
return this.http
.get(this.baseUrl)
.map(res => res.json());
}
}
私のアプリのmodule.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
//import { ResponsiveState, ResponsiveConfig, ResponsiveConfigInterface } from 'responsive-directives-angular2';
//import {ResponsiveModule, ResponsiveConfig, ResponsiveConfigInterface} from 'ng2-responsive';
import { AppComponent } from './app.component';
import { MdFormFieldModule,MdInputModule} from '@angular/material';
import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MaterialModule} from '@angular/material';
import {MdDialogModule} from '@angular/material';
//import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';
import { Select2Module } from 'ng2-select2';
//import { ModalModule } from 'ng2-modal-dialog/modal.module';
import { SecondComponent } from './second/second.component';
import { FirstserviceService } from './webServicesCall.service/firstservice.service';
import { Ng2DeviceDetectorModule, Ng2DeviceService } from 'ng2-device-detector';
import { CameraclickService } from './cameraclick.service';
import {BankdetailsService} from './cardDetails/modal/bankdetails.service';
import {RouterModule,Router,Routes} from '@angular/router';
import { CommonModule } from '@angular/common';
import { DefaultComponent } from './default/default.component';
import { HeaderComponent } from './header/header.component';
import {endOfSurveyComponent} from './endOfSurvey/endOfSurvey.component';
import {ProofOfRepairComponent} from './proofOfRepair/por.component';
import {SearchService} from './cardDetails/search.service';
//import { ClaimComponent } from './claim/claim.component';
//import { SurveyComponent } from './survey/survey.component';
import { CaptureclicksComponent } from './captureclicks/captureclicks.component';
import { CardDetailsComponent } from './cardDetails/cardDetails.component';
import { KeysPipe } from './second/keys.pipe';
import { ModalComponent } from './cardDetails/modal/modal.component';
const appRoutes: Routes = [
{ path: '', redirectTo: '/default', pathMatch: 'full' },
{ path: 'default', component: DefaultComponent },
{ path: 'second', component: SecondComponent},
{ path: 'captureclicks', component: CaptureclicksComponent},
{ path: 'proofOfRepair', component: ProofOfRepairComponent},
{path: 'endOfSurvey', component: endOfSurveyComponent},
{path: 'cardDetails', component: CardDetailsComponent}
];
@NgModule({
declarations: [
AppComponent,
SecondComponent,
DefaultComponent,
HeaderComponent,
endOfSurveyComponent,
CaptureclicksComponent,
ProofOfRepairComponent,
CardDetailsComponent,
KeysPipe,
ModalComponent
],
entryComponents: [ModalComponent],
imports: [
BrowserModule,
MaterialModule,
MdDialogModule,
FormsModule,
HttpModule,
Select2Module,
ReactiveFormsModule,
BrowserAnimationsModule,
MdFormFieldModule,
MdInputModule ,
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)
],
providers:[FirstserviceService ,CameraclickService,BankdetailsService,SearchService,Ng2DeviceService
],
bootstrap: [AppComponent]
})
export class AppModule { }
私は銀行の詳細である3つのドロップダウンから値を選択するモーダルHTML .Afterで3ドロップダウンを持っていますそれはifscコードを与え、そのコードは私がifscコードでテキストボックスを持っているcarddetailsコンポーネントhtmlでそれを表示しています。
私はこれを調べて呼び出し元のクラスではme.Thanks
未定義または空でない場合のみチェックし、変更された場合、それは私が@Inputで変数を定義する必要が
これを動作しますモーダルcomponent.tsファイルで、その値を値で初期化することは、呼び出し側のmodalコンポーネントと呼び出し側のcomponent.tsに渡したいと思います.tを再利用する必要がありますハット値を入力変数からこのクラスの変数に変換し、ダイアログを開いて関数を初期化します。そのアプローチは正しいのでしょうか？私はもう一つ疑いがある。入力デコレータを使用してデータを渡すために、私は、呼び出しモーダルコンポーネント.htmlの最後にモーダルセレクタを追加する必要がありますか？beacuseもし私がそうするなら、モーダルのコンテンツはすでにモーダルページを呼んでいます。 –
あなたの投稿を編集し、そのコンポーネントのコードを貼り付けるか、https://stackblitz.com/ –
を使用してください。今すぐやります –