How to pass formControlName to component?

Question

Angular

Good afternoon.
There is a small input component

@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>

And there is a Signup component in which I want to register a user. In it I create a form

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

I initiate it in ngOnInit and now I need to transfer the formControlName="password"
<med-input [label]="'Email'"></med-input>
label from the signup template to the input component in the component, I catch @Input and display just {{}}, but what to do with formControlName?
How can I get as a result

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

?

Answer 1

There are several ways
1) Pass FormControl
2) Implement ControlValueAccessor