File
Description
FullNameComponent includes a first, middle, and last name field. If you only
need an individual field, @see NameComponent.
Note This component is in dev, there are issues around "required"
TODO - Properly handle "required"
Extends
Implements
Example
<common-full-name [(person)]='person'></common-full-name>
Metadata
| providers |
{ provide: NG_VALUE_ACCESSOR, multi: true, useExisting: forwardRef(() => FullNameComponent) }
|
| selector |
common-full-name |
| styleUrls |
./full-name.component.scss |
| templateUrl |
./full-name.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
|
disabled
|
Type : boolean
|
Default value : false
|
|
|
|
firstNamelabel
|
Type : string
|
Default value : 'First Name'
|
|
|
|
lastNamelabel
|
Type : string
|
Default value : 'Last Name'
|
|
|
|
middleNamelabel
|
Type : string
|
Default value : 'Middle Name'
|
|
|
Methods
|
registerOnChange
|
registerOnChange(fn: any)
|
|
|
Parameters :
| Name |
Type |
Optional |
| fn |
any
|
No
|
|
|
registerOnTouched
|
registerOnTouched(fn: any)
|
|
|
Parameters :
| Name |
Type |
Optional |
| fn |
any
|
No
|
|
|
writeValue
|
writeValue(value: any)
|
|
|
Parameters :
| Name |
Type |
Optional |
| value |
any
|
No
|
|
|
Public
_onChange
|
Default value : () => {...}
|
|
|
|
Public
_onTouched
|
Default value : () => {...}
|
|
|
|
Public
NameRegEx
|
Type : string
|
Default value : '^[a-zA-Z][a-zA-Z\\-.\' ]*$'
|
|
|
|
Private
pattern
|
Type : string
|
Default value : 'Must begin with a letter followed by a letters, hyphen, period, apostrophe, or blank character'
|
|
|
|
Private
requiredMsgSeg
|
Type : string
|
Default value : 'is required'
|
|
|
|
Public
objectId
|
Type : string
|
Default value : UUID.UUID()
|
|
|
|
|
An identifier for parents to keep track of components
|
import { forwardRef, Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { Person } from '../../models/person.model';
import { Base } from '../../models/base';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
export interface FullNameErrorMsg {
required?: string;
pattern?: string;
}
/**
* FullNameComponent includes a first, middle, and last name field. If you only
* need an individual field, @see NameComponent.
*
* **Note** This component is in dev, there are issues around "required"
* TODO - Properly handle "required"
*
* @example
* <common-full-name [(person)]='person'></common-full-name>
*
* @export
*/
@Component({
selector: 'common-full-name',
templateUrl: './full-name.component.html',
styleUrls: ['./full-name.component.scss'],
providers: [
{ provide: NG_VALUE_ACCESSOR, multi: true, useExisting: forwardRef(() => FullNameComponent )}
]
})
export class FullNameComponent extends Base implements ControlValueAccessor, OnInit {
@Input() person: Person;
@Output() personChange = new EventEmitter<Person>();
@Input() showError: boolean;
@Input() firstNamelabel: string = 'First Name';
@Input() middleNamelabel: string = 'Middle Name';
@Input() lastNamelabel: string = 'Last Name';
@Input() disabled: boolean = false;
firstName: string ;
middleName: string;
lastName: string ;
public NameRegEx: string = '^[a-zA-Z][a-zA-Z\\-.\' ]*$';
public errMsg: FullNameErrorMsg ;
// default messages
private requiredMsgSeg: string = 'is required';
private pattern: string = 'Must begin with a letter followed by a letters, hyphen, period, apostrophe, or blank character';
public _onChange = (_: any) => {};
public _onTouched = () => {};
constructor() {
super();
}
ngOnInit() {
if (this.person) {
this.firstName = this.person.firstName ? this.person.firstName : '';
this.lastName = this.person.lastName ? this.person.lastName : '';
this.middleName = this.person.middleName ? this.person.middleName : '';
}
this.errMsg = {
required: this.requiredMsgSeg,
pattern: this.pattern
};
}
/*ngAfterViewInit(): void {
// https://github.com/angular/angular/issues/24818
this.form.valueChanges.pipe(debounceTime(0)).subscribe((values) => {
this.onChange.emit(values);
this._onChange(values);
this._onTouched();
}
);
}*/
// setFirstName(value: any) {
// this.person.firstName = value;
// this.onChange.emit(this.person);
// this._onChange(this.person);
// this._onTouched();
// }
// setMiddleName(value: any) {
// this.person.middleName = value;
// this.onChange.emit(this.person);
// this._onChange(this.person);
// this._onTouched();
// }
// setLastName(value: any) {
// this.person.lastName = value;
// this.onChange.emit(this.person);
// this._onChange(this.person);
// this._onTouched();
// }
registerOnChange(fn: any): void {
this._onChange = fn;
}
registerOnTouched(fn: any): void {
this._onTouched = fn;
}
writeValue(value: any): void {
this.person = value;
}
}
<div class="form-group col-sm-6 p-sm-0">
<common-name label="First Name"
[disabled]="disabled"
[(value)]="person.firstName"
objectID="first_name"></common-name>
<!-- (blurEvent)="onBlur($event)" -->
</div>
<div class="form-group col-sm-6 p-sm-0">
<common-name label="Middle Name"
[disabled]="disabled"
[(value)]="person.middleName"
objectID="middle_name"></common-name>
</div>
<div class="form-group col-sm-6 p-sm-0">
<common-name label="Last Name"
required
[disabled]="disabled"
[(value)]="person.lastName"
objectID="last_name"></common-name>
</div>
<!--
<div class="row">
<div class="col-md-4">
<div class="form-group"
[ngClass]="{'has-error': showError && (firstNameRef.touched && (firstName === undefined || firstName === null))}">
<label class="control-label" for="firstName_{{objectId}}"
>{{firstNamelabel}}</label>
<input type="text"
[ngModel]="firstName"
name="firstName"
(ngModelChange)="setFirstName($event)"
required
maxlength="30"
[pattern]="NameRegEx"
id="firstName_{{objectId}}" #firstNameRef="ngModel"
class="form-control">
<div *ngIf='showError && (firstNameRef.touched && (firstName === undefined || firstName === null))' role="alert" aria-live="assertive">
<div class="text-danger" *ngIf="firstNameRef.errors?.required"
>{{firstNamelabel}} {{errMsg.required}}</div>
<div class="text-danger" *ngIf="firstNameRef.errors?.pattern"
>{{errMsg.pattern}}</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group"
[ngClass]="{'has-error': showError && (middleNameRef.touched &&(middleName === undefined || middleName === null))}">
<label class="control-label if-applicable" for="middleName_{{objectId}}">{{middleNamelabel}}</label>
<input type="text"
name="middleName"
[ngModel]="middleName"
(ngModelChange)="setMiddleName($event)"
id='middleName_{{objectId}}' #middleNameRef="ngModel"
maxlength="30"
[pattern]="NameRegEx"
class="form-control">
<div *ngIf='middleNameRef.touched || showError' role="alert" aria-live="assertive">
<div class="text-danger" *ngIf="middleNameRef.errors?.required"
>{{middleNamelabel}} {{errMsg.required}}</div>
<div class="text-danger" *ngIf="middleNameRef.errors?.pattern"
>{{errMsg.pattern}}</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group"
[ngClass]="{'has-error': showError && (lastNameRef.touched && (lastName === undefined || lastName === null))}">
<label class="control-label" for="lastName_{{objectId}}" >{{lastNamelabel}}</label>
<input type="text"
name="lastName"
[ngModel]="lastName"
(ngModelChange)="setLastName($event)"
id="lastName_{{objectId}}" #lastNameRef="ngModel"
required
maxlength="30"
[pattern]="NameRegEx"
class="form-control">
<div *ngIf='showError && (lastNameRef.touched && (lastName === undefined || lastName === null))' role="alert" aria-live="assertive">
<div class="text-danger" *ngIf="lastNameRef.errors?.required"
>{{lastNamelabel}} {{errMsg.required}}</div>
<div class="text-danger" *ngIf="lastNameRef.errors?.pattern"
>{{errMsg.pattern}}</div>
</div>
</div>
</div>
</div> -->
Legend
Html element with directive