getting Validators to work in nested components

[john.mb...@gmail.com]

Hi,

So, in my Angular reactive forms, I am binding my form control to my component and in each component I have the following:

```

public form: FormGroup = new FormGroup({

control: new FormControl('', [Validators.required, Validators.max(1)])

});

```

I have added this into select dropdown in my HTML: 

[ngClass]="{ 'is-invalid': control.touched && control.invalid }"

I am not seeing is-invalid, am I doing something wrong?

[Todd Zmijewski]

Do you have a getter for the control?

control is not a property of the component. Either you need to create a getter or explicitly reference the control.

view:

form.get('control').touched && form.get('control').invalid

or

component class:

get control(): FormControl {

  return form.get('control');

[Todd Zmijewski]

god darnit....

get control(): FormControl {

  return this.form.get('control');



}

[Todd Zmijewski]

Typically the reason you see that in tutorials and what not is because getters are defined for the control.

[Todd Zmijewski]

I also wouldn't recommend naming the control control. That is really confusing. What is the purpose/context of the control. Name it that. Not control.

[Todd Zmijewski]

public form: FormGroup = new FormGroup({

doBetterAtNaming: new FormControl('', [Validators.required, Validators.max(1)])

});

get doBetterAtNaming(): FormControl {

  return this.form.get('doBetterAtNaming');

[Todd Zmijewski]

I'm not intending to come as a smart a**. I apologize if that is the way I'm coming off. That is not my intention.