Skip to content

Instantly share code, notes, and snippets.

@ajcrites
Created June 22, 2017 17:54
Show Gist options
  • Save ajcrites/79d5fd53168b2e8c1529a34cc7dd5fc0 to your computer and use it in GitHub Desktop.
Save ajcrites/79d5fd53168b2e8c1529a34cc7dd5fc0 to your computer and use it in GitHub Desktop.
diff --git a/src/app/password/password.component.ts b/src/app/password/password.component.ts
index b430b39..d45eba9 100644
--- a/src/app/password/password.component.ts
+++ b/src/app/password/password.component.ts
@@ -1,5 +1,5 @@
-import { Component, ViewChild, Input, Output, forwardRef, EventEmitter } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Component, ViewChild, Input, Output, EventEmitter } from '@angular/core';
+import { FormControl } from '@angular/forms';
import { Platform } from 'ionic-angular';
@@ -10,21 +10,18 @@ import { rgb } from 'csx';
@Component({
selector: 'tcp-password',
templateUrl: 'password.html',
- providers: [
- { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => PasswordComponent), multi: true }
- ]
})
-export class PasswordComponent implements ControlValueAccessor {
+export class PasswordComponent {
@ViewChild('passwordField') passwordField;
@Input() label = 'ACCOUNT.LABELS.PASSWORD';
+ @Input() control: FormControl;
@Input() wrapperCss: string;
@Input() inputCss: string;
@Input() labelCss: string;
@Output() show = new EventEmitter;
- val: string;
inputType = 'password';
showLabel = 'ACCOUNT.LABELS.PASSWORDSHOW';
@@ -45,17 +42,6 @@ export class PasswordComponent implements ControlValueAccessor {
constructor(private platform: Platform) {}
- get value() {
- return this.val;
- }
-
- set value(val) {
- if (val) {
- this.val = val;
- this.propagateChange(val);
- }
- }
-
showTap() {
if (this.inputType === 'password') {
this.inputType = 'text';
@@ -72,22 +58,4 @@ export class PasswordComponent implements ControlValueAccessor {
this.passwordField.setFocus();
this.show.emit(this.inputType === 'password');
}
-
- propagateChange: any = () => {
- };
-
- propagateTouch: any = () => {
- };
-
- writeValue(value) {
- this.value = value;
- }
-
- registerOnChange(fn) {
- this.propagateChange = fn;
- }
-
- registerOnTouched(fn) {
- this.propagateTouch = fn;
- }
}
diff --git a/src/app/password/password.html b/src/app/password/password.html
index a8f18cc..066efcb 100644
--- a/src/app/password/password.html
+++ b/src/app/password/password.html
@@ -1,5 +1,5 @@
<ion-item [ngClass]="wrapperCss">
<ion-label [ngClass]="labelCss" floating [translate]="label"></ion-label>
- <ion-input [ngClass]="inputCss" #passwordField [(ngModel)]="value" [type]="inputType" autocomplete clearOnEdit="false"></ion-input>
+ <ion-input [ngClass]="inputCss" #passwordField [formControl]="control" [type]="inputType" autocomplete clearOnEdit="false"></ion-input>
<a [ngClass]="showButtonCss" item-right (tap)="showTap()" [translate]="showLabel"></a>
</ion-item>
diff --git a/src/pages/account/change-password/change-password.html b/src/pages/account/change-password/change-password.html
index b51c78f..29c3efb 100644
--- a/src/pages/account/change-password/change-password.html
+++ b/src/pages/account/change-password/change-password.html
@@ -5,9 +5,9 @@
<ion-content>
<form [formGroup]="change" (ngSubmit)="doChange()">
<div [ngClass]="wrapperCss">
- <tcp-password formControlName="currentPass" [labelCss]="inputLabelCss" [wrapperCss]="currentPassCss"
+ <tcp-password [control]="change.controls.currentPass" [labelCss]="inputLabelCss" [wrapperCss]="currentPassCss"
label="CHANGEPASS.CURRENTPASS"></tcp-password>
- <tcp-password formControlName="newPass" [labelCss]="inputLabelCss" label="CHANGEPASS.NEWPASS"></tcp-password>
+ <tcp-password [control]="change.controls.newPass" [labelCss]="inputLabelCss" label="CHANGEPASS.NEWPASS"></tcp-password>
<ion-grid [ngClass]="validationWrapperCss">
<ion-row text-left>
@@ -44,7 +44,7 @@
</ion-row>
</ion-grid>
- <tcp-password formControlName="confirmPass" [labelCss]="inputLabelCss"
+ <tcp-password [control]="change.controls.confirmPass" [labelCss]="inputLabelCss"
label="CHANGEPASS.CONFIRMPASS"></tcp-password>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment