Передача formControlName в угловой компонент

Question

У меня реактивная форма.Настройка похожа на это:

myForm: FormGroup;

    this.myForm= new FormGroup({
        name: new FormControl("", [Validators.required, Validators.maxLength(15), Validators.pattern('...')]),
        ...
    });

Я использую это в своей форме следующим образом:

  <input
    type="text"
    formControlName="name"
  />
  <div *ngIf="name.errors?.required">
      Name is required
  </div>
  <div *ngIf="name.errors?.maxlength">
      Name must be {{ name.errors.maxlength.requiredLength }} characters        
  </div>
  <div *ngIf="name.errors?.pattern">
      Name has invalid characters.
  </div>

Это просто сокращенная версия моей формы.У меня есть несколько входов, и мне приходилось создавать ошибки div для каждого входа.

Поэтому, чтобы исправить это, я попытался создать компонент.Компонент очень похож на приведенный выше код:

  <input
    type="text"
    [formControlName]="formControlName"
  />
  <div *ngIf="name.errors?.required">
      Name is required
  </div>
  etc...

ts file:

@Component({
  selector: 'app-text',
  templateUrl: './text.component.html'
})
export class TextComponent  {

  @Input() formControlName: FormControl;
}

Поэтому в своей форме я хотел бы использовать этот компонент следующим образом:

<app-text [formControlName]="name"></app-text>

Но я не могу заставить это работать со свойством formControlName.

Возможно ли это?

Спасибо

Я почти у цели.

Я создал этот StackBlitz, так что покажите мой прогресс:

Демо

Просто борюсь с ошибками сейчас и как получить доступ к форме контроля для проверкиза эти ошибки

Answer 1

Если вы хотите получить доступ к formControl, лучше всего использовать NgControl в качестве DI

Причина:

• NgModel
• FormControlDirective
• FormControlName

Все это подклассы NgControl, поэтому вы окажете большую помощь себе, если сделаете это таким образом, так что еслиВ дальнейшем вы измените свое мнение об использовании formControl для NgControl и т. д. ... вы уже рассмотрели эти основы, используя NgControl

Так что в качестве примера это будет выглядеть примерно так:

import { Component, OnInit, Self } from '@angular/core';

import { NgControl } from '@angular/forms';

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

  constructor(@Self() private ngControl: NgControl) { }

  ngOnInit() {
    console.log(this.ngControl);
  }

}

Html

<app-text[formControl]="control"></app-text>

Причина, по которой мы используем @ Self , заключается в том, что компонент не смотрит дальше вверх по дереву инжектора, чтобы найти ngControl, но только по его элементу.Таким образом, вы можете вкладывать и т.д. ...

Это очень полезно для директив , но пока, я надеюсь, это помогло!

Answer 2

Вам необходимо передать элемент управления формы элементу ввода,

  <input

    [value]="val"
    type="text"
    (input)="val=$event.target.value;onChange($event.target.value)"
    (blur)="onTouched()"
    [formControl]="control"

  >


  <span *ngIf="control && !control.valid && control.touched">
    <span class="error" *ngIf="control.errors['required']"> The field should not be empty</span>
    <span class="error" *ngIf="control.errors['email']"> The field should be an email 
    </span>
  </span>

Получите элемент управления в вашем пользовательском компоненте в качестве входных данных и покажите ошибку на основе этого.

@Component({
  selector: 'aep-textbox',
  templateUrl: './textbox.component.html',
  styleUrls: ['./textbox.component.scss'],
  providers: [
{
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => TextboxComponent),
  multi: true
 }
]
})

 export class TextboxComponent extends DefaultValueAccessor implements OnInit {

 val:string = '';

 @Input('w-formcontrol') control;

 ngOnInit() {
 }

 writeValue(value: any): void {
  if(value) {
   this.val = value;
  }
 }
}