Нет доступа к значению для управления формой с ошибкой имени в угловых 7

Question

Я использую угловой 7. И у меня есть родительский и дочерний компоненты, как показано ниже Stackblitz.Но я даю formControlName от дочернего компонента.Когда вместо formControlName я написал «id», все работало отлично.Но когда я написал formControlName, он выдал ошибку Нет доступа к значению для управления формой с именем: 'brand'

STACKBLITZ

Я добавил этот код, который я видел из другого поста, в app.module.ts для решения, но он не работал.

providers: [
  { 
    provide: NG_VALUE_ACCESSOR,
    multi: true,
    useExisting: forwardRef(() => MyChildComponentComponent),
  }
]

Answer 1

Ваш компонент приложения должен выглядеть следующим образом:

<app-my-child-component formControlName="brand"></app-my-child-component>

Добавить провайдера в компонент, отсутствующий в модуле, и реализовать там методы "ControlValueAccessor".

@Component({
  selector: 'app-my-child-component',
  templateUrl: './my-child-component.component.html',
  styleUrls: ['./my-child-component.component.css'],
  providers:
    [ { 
    provide: NG_VALUE_ACCESSOR,
    multi: true,
    useExisting: forwardRef(() => MyChildComponentComponent),
  }],
})
export class MyChildComponentComponent implements ControlValueAccessor {
  value: string;
  onChange() {}
  onTouched() {}
  isDisabled: boolean = false;

  writeValue(value) {
    this.value = value
  }

  registerOnChange(fn) {
    this.onChange = fn
  }

  registerOnTouched(fn) {
    this.onTouched = fn
  }

  setDisabledState(isDisabled) {
    this.isDisabled = isDisabled;
  }

}

Нет необходимости в другой формев child component это будет что-то вроде:

<input 
  [value]="value"
  (input)="onChange($event.target.value)"
  (blur)="onTouched()"
  [disabled]="isDisabled"
  type="text">

Смотрите блиц стека здесь: https://stackblitz.com/edit/angular-formgroup-ccj26w?file=src%2Fapp%2Fmy-child-component%2Fmy-child-component.component.ts