Блог

Я использую базовые элементы управления формой для ввода, автозаполнения и т.д. поля, как показано ниже:

 <div *ngSwitchCase="'text'">
    <input matInput type="text" formControlName="{{controlName}}"/>
</div>
 

и теперь мне нужно добавить кнопку в форму, как показано ниже:

 <div *ngSwitchCase="'button'">
    <button mat-button formControlName="{{controlName}}" (click)="create()">Create</button>
</div>
 

Но я сталкиваюсь с ошибкой «Нет средства доступа к значению для элемента управления формой с именем: createEmp» ( createEmp это controlName значение, которое я передаю из компонента). Итак, возможно ли исправить эту ошибку?

Фредрик, кнопка не принимает FormControl, но всегда помните: FormControl существует, даже если в .html нет «ввода». Итак, вы можете сделать, например (представьте, что вы определяете FormGroup под названием «форма»)

 <button mat-button [disabled]="form.get(controlName).disabled"
                   (click)="form.get(controlName).setValue("one");
                            form.get(controlName).markAsTouched()">
   Create
</button>
 

Или, как сказал Кевин Занг, создайте пользовательский FormControl

Вам необходимо реализовать пользовательский элемент управления реактивной формой для вашей кнопки с помощью интерфейса ControlValueAccessor. Смотрите Эту статью для справки: ссылка

 export class TagsComponent implements ControlValueAccessor {
  onChange: (value: string[]) => void = () => {};
  onTouched: Function = () => {};
  isDisabled = false;
  
  …
  
  writeValue(value: string[]) {
    this.tags = value || [];
  }
  
  registerOnChange(fn: any) {
    this.onChange = fn;
  }
  
  registerOnTouched(fn: any) {
    this.onTouched = fn;
  }
  
  setDisabledState(disabled: boolean) {
    this.isDisabled = disabled;
  }
}