Как динамически удалять/добавлять только выбранные mat-form-field?

Я могу добавлять/удалять все <mat-form-field>...</mat-form-field>, но как только я пытаюсь первый из них оставить за пределами FormArray (как показано ниже, мне не нужно добавлять/удалять 'name' он неизменный для всех 'value') получаю ошибку core.mjs:6461 ERROR Error: Cannot find control with path: 'values -> name' И я не могу понять почему вообще ищется этот путь.

Мой ts файл:

`public categoryAddForm: FormGroup = new FormGroup({});

  constructor(public dialogRef: MatDialogRef<AddCategoryComponent>, 
  private formBuilder: 
  FormBuilder,
          public categoryService: CategoryService,
          @Inject(MAT_DIALOG_DATA) public data: AppTagging) {
}

ngOnInit() {
  this.categoryAddForm = this.formBuilder.group({
    'name': new FormControl(undefined, [Validators.required, Validators.minLength(1)]),
  });
  this.categoryAddForm = this.formBuilder.group({
    'values': this.formBuilder.array([AddCategoryComponent.createValueFormGroup()])
  });
}

public addValueFormGroup() {
  const values = this.categoryAddForm.get('values') as FormArray
  values.push(AddCategoryComponent.createValueFormGroup())
}

public removeOrClearValue(i: number) {
  const values = this.categoryAddForm.get('values') as FormArray
  if (values.length > 1) {
    values.removeAt(i)
  } else {
    values.reset()
  }
}

private static createValueFormGroup(): FormGroup {
  return new FormGroup({
    //       id: [],
    // 'name': new FormControl(undefined, [Validators.required, Validators.minLength(1)]),
    'value': new FormControl(undefined, [Validators.required, Validators.minLength(1)])
  })
}

get valuesArr() {
  return this.categoryAddForm.get('values') as FormArray
}

save(): void {
  // const value: ValuesOfCategory = this.readFormValue();
  // this.saveCategoryAndValues(value)
  // location.reload()
}

onNoClick() {
  this.dialogRef.close();
  location.reload();
}`

Мой html файл:
`<form [formGroup]="categoryAddForm">
  <h1 mat-dialog-title>Добавить категорию</h1>
  <div mat-dialog-content>
   <div formArrayName="values">

    <mat-form-field appearance="fill" style="width: 250px">
      <mat-label>Название категории</mat-label>
      <input matInput type="text" class="mat-form-field-autofill-control" 
  formControlName="name">
    </mat-form-field>
    <div class="row" *ngFor="let val of valuesArr.controls; let i = index" 
  [formGroupName]="i">
      <mat-form-field appearance="fill" style="width: 172px">
        <mat-label>Значение {{i + 1}}</mat-label>
        <input matInput type="text" class="mat-form-field-autofill-control" 
  formControlName="value">
      </mat-form-field>
      <button class="float-left" mat-icon-button color="primary" aria-label="Remove/clear"
            (click)="removeOrClearValue(i)" matTooltip="Remove">
        <mat-icon>highlight_off</mat-icon>
      </button>
      <button class="float-left" mat-icon-button color="primary" aria-label="Add"
            (click)="addValueFormGroup()" matTooltip="Add">
        <mat-icon>add_circle_outline</mat-icon>
      </button>
    </div>
  </div>
</div>

<div mat-dialog-actions>
  <button mat-raised-button (click)="onNoClick()">Отменить</button>
  <button mat-raised-button (click)="save()" [disabled]="categoryAddForm.invalid"
        style="margin-left: 40px; color: green">Сохранить
  </button>
</div>