Commit eec7ee54 authored by dev0tion's avatar dev0tion

Add create form validation

parent 3b6c88a3
...@@ -6,10 +6,12 @@ ...@@ -6,10 +6,12 @@
<div class="form-group"> <div class="form-group">
<label>Name:</label> <label>Name:</label>
<input class="form-control" formControlName="walletName" type="text" placeholder="Enter a name for your wallet."> <input class="form-control" formControlName="walletName" type="text" placeholder="Enter a name for your wallet.">
<div *ngIf="formErrors.walletName" class="alert alert-danger">{{formErrors.walletName}}</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Password:</label> <label>Password:</label>
<input class="form-control" formControlName="walletPassword" type="password" placeholder="Enter a password for your wallet."> <input class="form-control" formControlName="walletPassword" type="password" placeholder="Enter a password for your wallet.">
<div *ngIf="formErrors.walletPassword" class="alert alert-danger">{{formErrors.walletPassword}}</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Network:</label> <label>Network:</label>
......
...@@ -16,11 +16,7 @@ import { Mnemonic } from '../../shared/classes/mnemonic'; ...@@ -16,11 +16,7 @@ import { Mnemonic } from '../../shared/classes/mnemonic';
export class CreateComponent { export class CreateComponent {
constructor(private globalService: GlobalService, private apiService: ApiService, private router: Router, private fb: FormBuilder) { constructor(private globalService: GlobalService, private apiService: ApiService, private router: Router, private fb: FormBuilder) {
this.createWalletForm = fb.group({ this.buildCreateForm();
"walletName": ["", Validators.required],
"walletPassword": ["", Validators.required],
"selectNetwork": ["main", Validators.required]
});
} }
private createWalletForm: FormGroup; private createWalletForm: FormGroup;
...@@ -29,6 +25,55 @@ export class CreateComponent { ...@@ -29,6 +25,55 @@ export class CreateComponent {
private responseMessage: string; private responseMessage: string;
private errorMessage: string; private errorMessage: string;
private buildCreateForm(): void {
this.createWalletForm = this.fb.group({
"walletName": ["", [
Validators.required,
Validators.minLength(3),
Validators.maxLength(24)
]
],
"walletPassword": ["", Validators.required],
"selectNetwork": ["main", Validators.required]
});
this.createWalletForm.valueChanges
.subscribe(data => this.onValueChanged(data));
this.onValueChanged();
}
onValueChanged(data?: any) {
if (!this.createWalletForm) { return; }
const form = this.createWalletForm;
for (const field in this.formErrors) {
this.formErrors[field] = '';
const control = form.get(field);
if (control && control.dirty && !control.valid) {
const messages = this.validationMessages[field];
for (const key in control.errors) {
this.formErrors[field] += messages[key] + ' ';
}
}
}
}
formErrors = {
'walletName': '',
'walletPassword': ''
};
validationMessages = {
'walletName': {
'required': 'Name is required.',
'minlength': 'Name must be at least 3 characters long.',
'maxlength': 'Name cannot be more than 24 characters long.'
},
'walletPassword': {
'required': 'A password is required.'
}
};
private onBackClicked() { private onBackClicked() {
this.router.navigate(["/setup"]); this.router.navigate(["/setup"]);
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment