Как передать в компонент formControlName?

Question

[microf]

Добрый день.
Есть небольшая компонента input

@Component({
  selector: 'input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.scss']
})
export class InputComponent implements OnInit {
  @Input() label: string; 
  constructor() { }
  ngOnInit() {
  }
}

<div class="group">
    <input type="text" required>
    <span class="bar"></span>
    <label>{{label}}</label>
</div>

И есть компонент Signup в которой я хочу сделать регистрацию пользователя. В ней я создаю форму

initForm() {
    this.SignupReactiveForm = this.fb.group({
       password: ['', [
        Validators.required,
        Validators.pattern(/[A-z]/)
      ]
      ],
      email: ['', [
        Validators.required, Validators.email
      ]
      ],
         });
  }

Инициирую её в ngOnInit и теперь мне надо из шаблона signup в компоненту input передать formControlName="password"

<med-input [label]="'Email'"></med-input>
label в компоненте я ловлю @Input и вывожу просто {{}}, а что делать с formControlName?

Как мне, в результате, получить

<div class="group">
    <input type="text" required formControlName="password">
    <span class="bar"></span>
    <label>{{email}}</label>
</div>

?

Answer 1

[denismaster]

Есть несколько способов

1) Передавать FormControl

2) Реализовать ControlValueAccessor

Comments

[microf]

Если мне в компоненту передавать FormControl, то мне придется в компоненте Input реализовывать FormGroup, FormBuilder, а это неправильно же, чтобы компонента оставалась независимой. Или я неправильно понял?

[denismaster]

microf, ну просто @Input() formControl; дальше в макете
Но обычно делают 2 вариант