92 lines
2.4 KiB
TypeScript
92 lines
2.4 KiB
TypeScript
// vim: set tw=80 ts=2 sw=2 sts=2 :
|
|
import { Component, OnInit, OnChanges, Input, Output, EventEmitter } from '@angular/core';
|
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
|
|
|
import { Account } from './account';
|
|
|
|
@Component({
|
|
selector: 'account-form',
|
|
exportAs: 'accountForm',
|
|
template: `
|
|
<form novalidate
|
|
(keyup.enter)="submit()" [formGroup]="form">
|
|
<div class="form-group row">
|
|
<label class="col-sm-4 control-label" for="name">
|
|
Account name
|
|
</label>
|
|
|
|
<div class="col-sm-8"
|
|
[class.has-danger]="name.errors">
|
|
<input class="form-control"
|
|
id="name" formControlName="name"
|
|
placeholder="Account name">
|
|
|
|
<div class="help-block text-danger" *ngIf="name.errors">
|
|
<p *ngIf="name.errors.required">The account name is required.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group row">
|
|
<label class="col-sm-4 control-label" for="authorized-overdraft">
|
|
Authorized overdraft
|
|
</label>
|
|
|
|
<div class="col-sm-8"
|
|
[class.has-danger]="authorizedOverdraft.errors">
|
|
<div class="input-group">
|
|
<input class="form-control"
|
|
id="authorized-overdraft" formControlName="authorizedOverdraft"
|
|
placeholder="Authorized overdraft">
|
|
|
|
<div class="input-group-addon">.00€</div>
|
|
</div>
|
|
|
|
<div class="help-block text-danger" *ngIf="authorizedOverdraft.errors">
|
|
<p *ngIf="authorizedOverdraft.errors.required">
|
|
The authorized overdraft is required.
|
|
</p>
|
|
|
|
<p *ngIf="authorizedOverdraft.errors.max">
|
|
The authorized overdraft must be less than or equal to 0.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
`
|
|
})
|
|
export class AccountFormComponent implements OnInit {
|
|
public form: FormGroup;
|
|
@Input() account: Account;
|
|
@Output('submit') submitEventEmitter: EventEmitter<void> = new EventEmitter<void>();
|
|
|
|
constructor(private formBuilder: FormBuilder) {}
|
|
|
|
ngOnInit() {
|
|
this.form = this.formBuilder.group({
|
|
name: ['', Validators.required],
|
|
authorizedOverdraft: ['', [Validators.required, Validators.max(0)]],
|
|
});
|
|
|
|
this.form.patchValue({
|
|
name: this.account.name,
|
|
authorizedOverdraft: this.account.authorized_overdraft
|
|
});
|
|
}
|
|
|
|
submit() {
|
|
if(this.form.valid) {
|
|
this.submitEventEmitter.emit();
|
|
}
|
|
}
|
|
|
|
get name() {
|
|
return this.form.get('name');
|
|
}
|
|
|
|
get authorizedOverdraft() {
|
|
return this.form.get('authorizedOverdraft');
|
|
}
|
|
}
|