mat-form-field must contain a MatFormFieldControl

Question

We are trying to build our own form-field-Components at our Company. We are trying to wrap material design\'s Components like this:

field:

Answer 1

A partial solution is to wrap the material form field in a custom component and implement the ControlValueAccessor interface on it. Besides content projection the effect is pretty much the same.

See full example on Stackblitz.

I used FormControl (reactive forms) inside CustomInputComponent but FormGroup or FormArray should work too if you need a more complex form element.

app.component.html

  
    First name
    
    Fill in first name.
    
      
        You must fill in the first name.
      
    
  

  
  

  
    Submit
  

custom-input.component.html

  {{ label }}

  
  {{ hint }}

  
    
    
      
        {{ item.value }}