button-input-field
v0.1.3
Published
This is an anglar component (module) that button input style for form input field
Downloads
3
Maintainers
Readme
Button Input Field
This is an anglar component (module) that has a style and feel of a button. Hover hilights the button and you must click to edit and enter the input state. Once completed the user may choose to tab (blur), click the checkmark (icon) or press return to exit the editable state.
This is a formControl and can easily be added to a formgroup the typical way. There are also event (change) you can register actions.
Intsallation
npm install button-input-field
Then import the module ButtonInputFieldModule
and add the component
<wav-button-input-field></wav-button-input-field>
Inputs
The following Inputs are available
| Input | Type | Defaut | Description | | ----- | ---- | ------ | ----------- | | label | STRING | NULL | label for input | | placeholder | STRING | NULL | placeholder for input | | copypaste | BOOLEAN | FASLE | button for copy contents | | readonly | BOOLEAN | FASLE | read only | | disabled | BOOLEAN | FASLE | disable input |
Output
The following Inputs are available
| Output | Type | Description | | ----- | ---- | ------ | ----------- | | changed | STRING | event emitter on change |
FormControl
The component is a formControl and accepts all events types
Options
<wav-button-input-field
label="Service full name description"
placeholder="Local-Pro Transact"
formControlName="application"
(changed)="onUpdateBasicInfo()"
></wav-button-input-field>
Sample Implementation
selection: formGroup
constructor(
private fb: FormBuilder
) {}
ngOnInit() {
selection = this.fb.group({
country: [null]
})
this.selection.patchValue({ country: 'Canada'})
this.selection.valueChanges.subscribe(data => console.log(data))
}