ReactiveForms hasError('required') always returning false

Viewed 2208

In my Angular App, we have an array of inputs, for now we have the following going on:

{{ item.valid }} returns false in case the required validation was fulfilled -> That is correct

If we do: item.hasError('required') it returns false -> That is NOT correct

What do I need to make the hasError method to work?

That is how we build our Reactive Form:

private buildForm(prices: Array<Price>, arrayName: string): FormArray {
    let controls = new FormArray([]);

    prognoseAngaben.forEach(price => {
      controls.push(new FormGroup(
        {
          value: new FormControl(price.value, [Validators.required, Validators.min(0)]),
        }));
    });

    this.myForm.setControl(arrayName, controls);

    return controls;
}

And that is our HTML:

<tbody [formArrayName]="arrayName">
    <tr *ngFor="let item of myForm.controls[arrayName].controls; let i = index">
        <ng-container [formGroupName]="i">
            <kendo-numerictextbox [formControlName]="'value'" [format]="'n0'" [decimals]="0" [spinners]="false" [min]="0"></kendo-numerictextbox>
        <span>{{item.hasError('required')}}</span>
        <span>{{item.valid}}</span>
        </ng-container>
    </tr>
</tbody>

What am I missing?

EDIT:

I create a Plunker with the answer:

https://plnkr.co/edit/l7gyONd4pLqqWGLGVjyb?p=preview

1 Answers
Related