Angular 6 Forms TypeError: Cannot read property 'valid' of null

Question

I have a simple form with two FormControls, where I subscribe to all valueChanges. But when checking for errors I get this error: Note that I am first able to log the input, but afterward its null.

Typescript

export class Component {

    @Input() product: Product;

    form: FormGroup;
    errors: any;
    messages: any;

    constructor(
        private fb: FormBuilder,
    ) { }

    ngOnInit(): void {
        this.setupMessages();
        this.form = this.fb.group({
            name: ['', [
                Validators.required,
                Validators.minLength(3),
                Validators.maxLength(100),
            ]],
            description: ['', [
                Validators.maxLength(10000),
            ]],
        });
        this.form.patchValue(this.product);
        this.form.valueChanges.subscribe(data => this.checkErrors());
    }

    private checkErrors(): void {
        for (let field in this.errors) {
            this.errors[field] = '';
            let input = this.form.get(field);
            // I am able to log input
            // but input.valid is null
            if (!input.valid) {
                for (let error in input.errors) {
                    this.errors[field] = this.messages[field][error];
                }
            }
        }
    }
    private setupMessages(): void {
        this.messages = {
            name: {
                required: 'Please give your product an awesome name',
                minlength: 'The name should be longer than 3 characters',
                maxlength: 'Keep your product name under 100 characters',
            },
            description: {
                maxlength: 'Your description is to long',
            },
        }
        this.errors = {
            name: '',
            descripton: '',
        }
    }

}

HTML

<form [formGroup]="form">
        <dy-input
            [required]="true"
            [placeholder]="'Give your product an awesome name'"
            formControlName="name"
            [error]="errors.name"
            [maxlength]="100"
        >
            Name
        </dy-input>
        <dy-textarea
            [placeholder]="'Pointing out details helps to improve sales'"
            [error]="errors.description"
            formControlName="description"
            [height]="'480px'"
            [maxlength]="10000"
        >
            Description
        </dy-textarea>
    </form>

As you can see, I am using my own custom Form Controls. But I'm quite sure, that the issue is not caused by them, because of the fact, that they don't cause any errors in other forms.

Answer 1

The second time around, your input is null, because of a typo in your errors.

private setupMessages(): void {
    this.messages = {
        name: {
            required: 'Please give your product an awesome name',
            minlength: 'The name should be longer than 3 characters',
            maxlength: 'Keep your product name under 100 characters',
        },
        description: {
            maxlength: 'Your description is to long',
        },
    }
    this.errors = {
        name: '',
        descripton: '',
    }
}

Note, in this.errors, you have an error key called descripton, but your formgroup key is description (spelled correctly).

You're missing an i in the this.errors version.

Also, in addition to my comment above, maybe worth editing your condition to be if (input && !input.valid) to keep it safe :)