Forms Support
You can use the ColorPicker and the ColorPalette in template-driven or reactive forms.
Template-Driven Forms
The following example demonstrates how to use the components in template-driven forms by using the ngForm directive.
@Component({
selector: 'my-app',
styles: [`
.example-wrapper {
display: flex;
flex-wrap: wrap;
min-height: auto;
}
.example-wrapper > .k-button {
font-weight: bold;
align-self: self-start;
}
.example-wrapper form {
margin-right: 0.333rem;
}
`],
template: `
<div class="example-config">
<div>
<strong>Selected color: {{color || 'N/A'}}</strong>
</div>
<div>
<strong>Valid: {{templateForm.controls.color?.valid}}</strong> |
<strong>Pristine: {{templateForm.controls.color?.pristine}}</strong> |
<strong>Touched: {{templateForm.controls.color?.touched}}</strong>
</div>
</div>
<div class="example-wrapper">
<form #templateForm="ngForm" class="form">
<kendo-colorpicker
[view]="'palette'"
[format]="'hex'"
name="color"
[(ngModel)]="color"
required
>
</kendo-colorpicker>
</form>
<button type="button" class="k-button" (click)="templateForm.controls.color?.reset()">Reset</button>
</div>
`
})
class AppComponent implements OnInit {
public color: string;
}Reactive Forms
The FormGroup provides a way to render reactive forms. For more details, refer to the Angular Documentation.
The following example demonstrates how to use the components in a reactive form.
import {
FormsModule,
ReactiveFormsModule,
FormGroup,
FormBuilder,
FormControl,
Validators
} from '@angular/forms';
@Component({
selector: 'my-app',
styles: [`
.example-wrapper {
display: flex;
flex-wrap: wrap;
min-height: auto;
}
.example-wrapper > .k-button {
font-weight: bold;
align-self: self-start;
}
.example-wrapper form {
margin-right: 0.333rem;
}
`],
template: `
<div class="example-config">
<div>
<strong>Selected color: {{color?.value || 'N/A'}}</strong>
</div>
<div>
<strong>Valid: {{color?.valid}}</strong> |
<strong>Pristine: {{color?.pristine}}</strong> |
<strong>Touched: {{color?.touched}}</strong>
</div>
</div>
<div class="example-wrapper">
<form [formGroup]="form" class="form">
<kendo-colorpicker
[formControl]="color"
>
</kendo-colorpicker>
</form>
<button type="button" class="k-button" (click)="color?.reset()">Reset</button>
</div>
`
})
class AppComponent {
public form: FormGroup;
public color: FormControl;
constructor(formBuilder: FormBuilder) {
this.color = formBuilder.control('', [Validators.required]);
this.form = formBuilder.group({
color: this.color
});
}
}