Błąd walidacji w angularze - typescript

Question

Mam problem z walidacją. To mój HTML: 

<form method="POST" [formGroup]="addInvoiceForm" (ngSubmit)="addData()">
  <div class="formularz" *ngFor="let item of items">
    <mat-form-field >
      <mat-label>Name</mat-label>
      <input type="text" matInput formControlName="name"  [formControl]="item.nameFormControl" maxlength="30" minlength="3">
      <mat-error *ngIf="addInvoiceF['name'].errors && addInvoiceF['name'].errors['required']">Name is required</mat-error>
    </mat-form-field>
    <mat-form-field>
      <mat-label>Count</mat-label>
      <input type="number"  formControlName="count" matInput [formControl]="item.countFormControl" maxlength="100" minlength="1">
    </mat-form-field>
    <mat-form-field >
      <mat-label>Price</mat-label>
      <input type="number" matInput formControlName="price"  [formControl]="item.priceFormControl" maxlength="1000000" minlength="1">
      <mat-error *ngIf="addInvoiceF['price'].errors && addInvoiceF['price'].errors['required']">Price is required</mat-error>
    </mat-form-field>
    <button mat-icon-button color="primary" class="delete" matTooltip="Remove item" (click)="deleteForm(item)">
      <mat-icon>delete</mat-icon>
    </button>
  </div>
  <div class="add-new">
    <button type="button" mat-icon-button color="primary" class="add" matTooltip="Add new item" (click)="addForm()">
      <mat-icon>add</mat-icon>
      Add new item
    </button>
  </div>
  <div class="add">
    <button mat-icon-button color="primary" class="myButton" id="add_data_button">
      Submit
    </button>
  </div>
</form>

A to moj typescript: 

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroupDirective, NgForm, Validators, FormBuilder, FormGroup } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material/core';
import { ViewChild, ElementRef } from '@angular/core';
import { PagesService } from '../pages.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-new-invoice',
  templateUrl: './new-invoice.component.html',
  styleUrls: ['./new-invoice.component.css']
})
export class NewInvoiceComponent implements OnInit {


  matcher = new ErrorStateMatcher();
  addInvoiceForm!: FormGroup;
  get addInvoiceF() { return this.addInvoiceForm.controls; }

  items: any[] = [
    { nameFormControl: new FormControl(), countFormControl: new FormControl(), priceFormControl: new FormControl() }
  ];

  formRows: any[] = [{ name: '', count: 1, price: '' }];

  constructor(
    private formBuilder: FormBuilder,
    private pagesService: PagesService,
    private router: Router
  ) {
    window.addEventListener('beforeunload', () => {
      for (let key in localStorage) {
        if (key.includes('formRows')) {
          localStorage.removeItem(key);
        }
      }
    });
  }


  ngOnInit(): void {
    this.addInvoiceForm = this.formBuilder.group({
      name: ['', Validators.required],
      count: [''],
      price: ['', Validators.required],
    });
  }

  addFormRow() {
    this.formRows.push({ name: '', count: 1, price: '' });
  }

  addForm() {
    this.items.push({ nameFormControl: new FormControl(), priceFormControl: new FormControl() });
  }

  deleteForm(item: any) {
    const index = this.items.indexOf(item);
    if (index !== -1) {
      this.items.splice(index, 1);
    }
  }

  addData() {
    if (this.addInvoiceForm.invalid) {
      return;
    }
    this.formRows = this.items.map(item => ({
      name: item.nameFormControl.value || '',
      count: item.countFormControl ? item.countFormControl.value : '',
      price: item.priceFormControl.value || '' 
    }));
    this.pagesService.setFormData(this.formRows);
    console.log(this.formRows);
    this.router.navigate(['/preview-invoice']);
  }
}

Problem jest w tym , że po wypełnieniu pola pojawiają się mat-errory że input jest wymagany mimo tego że są wpisane. Bez "

 if (this.addInvoiceForm.invalid) {

      return;" Wszystko działa prawidłowo

Answer 1

W walidacji używasz 

addInvoiceF

natomiast sprawdzasz walidacje formularza 
 

 if (this.addInvoiceForm.invalid) 

oraz masz coś takiego jak: 
 

 this.addInvoiceForm = this.formBuilder.group({
      name: ['', Validators.required],
      count: [''],
      price: ['', Validators.required],
    });

A zwracasz do tego formularza : 

get addInvoiceF() { return this.addInvoiceForm.controls; }

zawracasz kontrolki z formularza addInvoiceForm, natomiast twoje errory są przypisane jako addInvoiceF

 <mat-error *ngIf="addInvoiceF['price'].errors && addInvoiceF['price'].errors['required']">Price is required</mat-error>

wiec generalnie masło maślane tu widzę i problem z mat-error będzie taki że działa antagonistyczne do kontrolek formularza. 
Jeszcze możesz validacje zmienić z  addInvoiceForm na 

  if (this.addInvoiceF.invalid) {
      return;
    }