Comments (4)
Hi @xavierclotet. Thank you for a first issue on this repository :) Components that you see in the demo project are just sketches to demonstrate library capabilities. Indeed, in our real life cases they implement ControlValueAccessor
interface and able to work with forms and ngModel, however here they serve a specific role. Adding extra code to make them closer to what you could actually use in your applications would dilute what they are meant to show.
That said, here's the code for app-input
to use it with forms. If you need something else, you can use it as basis. One day, I hope, we might release a polymorpheus based UI components library, but that's just a dream at this point.
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
forwardRef,
Input,
} from '@angular/core';
import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
@Component({
selector: 'app-input',
templateUrl: './input.template.html',
styleUrls: ['./input.style.less'],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => InputComponent),
multi: true,
},
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class InputComponent implements ControlValueAccessor {
@Input()
content: PolymorpheusContent<never> | null = null;
@Input()
placeholder = '';
value = '';
disabled = false;
onChange: Function = () => {};
onTouched: Function = () => {};
constructor(private readonly changeDetectorRef: ChangeDetectorRef) {}
writeValue(value: any) {
this.value = value ? String(value) : '';
this.changeDetectorRef.markForCheck();
}
setDisabledState(disabled: boolean) {
this.disabled = disabled;
this.changeDetectorRef.markForCheck();
}
registerOnTouched(onTouched: Function) {
this.onTouched = onTouched;
}
registerOnChange(onChange: Function) {
this.onChange = onChange;
}
onMouseDown(event: MouseEvent, input: HTMLInputElement) {
event.preventDefault();
input.focus();
}
onBlur() {
this.onTouched();
}
onValueChange(value: string) {
this.value = value;
this.onChange(value);
}
}
<input
#input
type="text"
class="input"
[placeholder]="placeholder"
[disabled]="disabled"
[ngModel]="value"
(ngModelChange)="onValueChange($event)"
(blur)="onBlur()"
/>
<polymorpheus-outlet
class="outlet"
[content]="content"
(mousedown)="onMouseDown($event, input)"
>
<ng-template let-icon><div [innerHTML]="icon"></div></ng-template>
</polymorpheus-outlet>
Note that to keep things declarative we still have internal value
property and do not access native input element directly. That's why we need changeDetectorRef.markForCheck()
to trigger change detection when control value has been changed externally.
from ng-polymorpheus.
Ok thanks! but this is not supporting formControlname, you need an @input() group: FormGroup
from ng-polymorpheus.
That is a proper way to implement custom control. You can use it like that:
<form [formGroup]="group">
<app-input formControlName="name"/>
</form>
<app-input [formControl]="control"/>
<app-input [(ngModel)]="value"/>
from ng-polymorpheus.
Ok thank you very much!
from ng-polymorpheus.
Related Issues (17)
- [FEATURE] Observables Support HOT 9
- 🐞 - Angular 17.0.3 Replacing the `context` object of an `EmbeddedViewRef` is deprecated.
- 🚀 - Upgrade to standalone directives HOT 1
- Clarification on default outlet styling and how to override without !important HOT 6
- Move type-narrowing methods to utility functions HOT 1
- 🐞 - Cannot create proxy with a non-object as target or handler HOT 1
- [BUG] Examples are not working in CodeSandbox HOT 1
- [FEATURE] Use more idiomatic Typing HOT 5
- [BUG] Component context and Angular 12 HOT 1
- [BUG] Incorrect behavior of the `in` operator HOT 1
- 🤖 - Support Angular 16
- 🚀 - Standalone API HOT 2
- [FEATURE] Angular 13.2 Mayby something usefull for this library? HOT 4
- Request for Polymorphius Library Update on npm 🚀 HOT 1
- 🐞 - Primitive context in templates and components
- [BUG] Primitive value is not properly typed
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ng-polymorpheus.