Validation on Custom Angular Material Form Field

Question

I'm trying to make a wrapper component for a color picker using ngx-color-picker and Angular Materials FormField. I configured it as required but it's outline doesn't turn red when invalid like the other form fields... How can I achieve this behavior on my custom form field?

color-picker.component.ts

import { Component, Input, forwardRef } from '@angular/core'
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'

// inspiration:
// https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

export const requiredValidator = (c: FormControl): ValidationErrors | null => {
    return
    c.value === '' ||
    c.value === null ||
    c.value === undefined ||
    c.value.length === 0
        ? {
              required: {
                  valid: false,
              },
          }
        : null
}

@Component({
    selector: 'nda-color-picker',
    templateUrl: './color-picker.component.html',
    styleUrls: ['./color-picker.component.scss'],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => ColorPickerComponent),
            multi: true,
        },
    ],
})
export class ColorPickerComponent implements ControlValueAccessor, Validator {
    @Input() label: string
    _color: string

    get color() {
        return this._color
    }
    set color(value: string) {
        this._color = value
        this.propagateChange(this._color)
    }

    constructor() {}

    writeValue(value: any) {
        if (value !== undefined) {
            this.color = value
        }
    }

    propagateChange = (_: any) => {}

    registerOnChange(fn) {
        this.propagateChange = fn
    }

    registerOnTouched() {}

    validate(control: AbstractControl): ValidationErrors | null {
        return requiredValidator(control as FormControl)
    }
}

color-picker.component.html

<mat-form-field appearance="outline" [floatLabel]="'always'">
    <mat-label>{{ label }}</mat-label>
    <input
        matTooltip="{{ color }}"
        cpOKButton="true"
        cpCancelButton="true"
        [required]="required"
        matInput
        [ngStyle]="{ color: color, background: color }"
        [colorPicker]="color"
        (colorPickerChange)="color = $event"
    />
</mat-form-field>

form-component.html

<form
    [formGroup]="transportForm"
    autocomplete="off"
    (ngSubmit)="handleSubmit()"
>A
    <div mat-dialog-content>
        <div fxLayout="row wrap" fxLayoutGap="1rem">
            <mat-form-field appearance="outline">
                <mat-label>Icon</mat-label>
                <input
                    matInput
                    placeholder="Icon"
                    formControlName="icon"
                    required
                />
            </mat-form-field>
            <nda-color-picker
                label="Badge Color Code"
                formControlName="badgeColorCode"
                required
            ></nda-color-picker>
            <nda-color-picker
                label="Text Color Code"
                formControlName="textColorCode"
                required
            ></nda-color-picker>
            <mat-form-field appearance="outline">
                <mat-label>Badge Type</mat-label>
                <input
                    matInput
                    placeholder="Badge Type"
                    formControlName="badgeType"
                />
            </mat-form-field>
        </div>
    </div>

    <!-- dialog actions -->
    <div mat-dialog-actions fxLayout="row" fxLayoutAlign="space-between center">
        <div>
            <button
                type="button"
                *ngIf="data && data.code"
                color="warn"
                mat-flat-button
                (click)="handleDelete()"
            >
                DELETE
            </button>
        </div>
        <div class="btn-container">
            <button type="reset" mat-stroked-button (click)="handleCancel()">
                CANCEL
            </button>
            <button
                mat-flat-button
                color="accent"
                [disabled]="transportForm.pristine"
            >
                SAVE
            </button>
        </div>
        <div
            *ngIf="!transportForm.valid"
            class="mat-small dialog-error-message"
        >
            * Fill out all required fields
        </div>
    </div>
</form>

------ UPDATE ------

I updated the color-picker.component with a validator function and class implementing Validator interface. The validator function is actually called and works as expected. But the form field isn't marked as invalid as reactive form fields normally are (css class .ng-invalid).

https://stackoverflow.com/questions/54645878/is-it-possible-to-crate-a-validator-for-a-custom-component-not-for-a-formcontro/54648891#54648891 — Eliseo, Mar 14 '19 at 15:44
@Eliseo: I tried implementing NG_VALIDATORS like suggested in the link. But unfortunately it does not change anything... — olefrank, Mar 15 '19 at 09:27

score 1 · Answer 1 · answered Mar 14 '19 at 14:58

1

You can use ReactiveFormsModule custom classes to set styles for different statuses :

.ng-invalid {
  border: 1px solid red;
}

You can find more documentation about ReactiveFormsModule css classes in angular.io...css-classes.

answered Mar 14 '19 at 14:58

ibenjelloun

7,425
2
29
53

The class `.ng-invalid` is not added to `` like all the other inputs. So the problem must be, that `` isn't validated at all. – olefrank Mar 15 '19 at 09:30
I used this example https://alligator.io/angular/custom-form-control/ and added validation to make this https://stackblitz.com/edit/stackoverflow-55165510 . It's working. – ibenjelloun Mar 15 '19 at 11:00
ibenjelloun, there a bug in your code, see my answer – Eliseo Mar 15 '19 at 12:33
Sorry but you're talking about alligator.io's code and it does not give additional value to the answer. @olefrank if you're still stuck with this make a stackblitz with your issue and I'll give it a look when I have time. – ibenjelloun Mar 15 '19 at 13:24

score 0 · Answer 2 · answered Mar 15 '19 at 12:33

ibenjelloun, there a bug in your code. Replace your function get value() to return null if ratting equals 0 else if select an start and deselect don't give you error

get value(): number {
    let ratting= this.stars.reduce((total, starred) => {
      return total + (starred ? 1 : 0);
    }, 0);
    return ratting?ratting:null;
  }

Olefrank if you want that the control was who give the error add providers and create function validate, see the ibenjelloun forked stackblitz

Validation on Custom Angular Material Form Field

2 Answers2