Forms Support

You can use the ColorPalette in template-driven or reactive forms.

Template-Driven Forms

The following example demonstrates how to use the ColorPalette 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: 1rem;
        }
    `],
    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-colorpalette
                    name="color"
                    [(ngModel)]="color"
                    required
                >
                </kendo-colorpalette>
            </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 ColorPalette 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: 1rem;
        }
    `],
    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-colorpalette
                    [formControl]="color"
                >
                </kendo-colorpalette>
            </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
        });
    }
}

In this article