Angular - 表单内的组件 - formControlName 必须与父级一起使用

Question

I wanted to reuse a single component to dynamically generate form input fields and came up with this code

form-field.component.html

<label *ngIf="formLabel">{{formLabel}}</label>
<input
        type="text"
        class="form-control"
        [formControlName]="formFieldName"
        [ngClass]="{
              'is-invalid': formField.dirty && formField.errors
            }"
        [placeholder]="placeholder"
/>
<div
        *ngIf="formField.dirty && formField.errors"
        class="invalid-feedback"
>
<span *ngIf="formField.errors.required">
    {{requiredMessage}}
</span>
    <div *ngIf="formField.errors.pattern">
    <span *ngFor="let message of patternErrorMessages">
        {{message}}
    </span>
    </div>
</div>

form-field.component.ts

  @Input() formField: AbstractControl;
  @Input() patternErrorMessages: string[];
  @Input() formLabel: string;
  @Input() formFieldName: string;
  @Input() placeholder: string;
  @Input() form: FormGroup;

  requiredMessage = FORM_REQUIRED;

  constructor() { }

  ngOnInit(): void {
    this.patternErrorMessages = this.patternErrorMessages.length === 0 ? ['Pattern Mismatch'] : this.patternErrorMessages;
  }

parent-component.html

<form (ngSubmit)="validSubmit(myFormGroup)" [formGroup]="myFormGroup">
         <div class="form-group">
          <app-form-field
                  [formField]="myFormGroup.controls.name"
                  [patternErrorMessages]="['Only Alphabets and Numbers are allowed.']"
                  [formLabel]="'Name'"
                  [placeholder]="'Enter Name'"
                  [form]="myFormGroup"
          >
          </app-form-field>
        </div>
</form>

And I'm getting this error while calling it.

ERROR Error: formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup
           directive and pass it an existing FormGroup instance (you can create one in your class).

Answer 1

I think you forgot to add formGroup in form-field.component.html .

Wrap your form-field in:

<div [formGroup]="form">
 ...
</div>

Answer 2

If you want to have custom form controls, make them implement ControlValueAccessor from @angular/forms .

export interface ControlValueAccessor {
  writeValue(obj: any) : void;
  registerOnChange(fn: any) : void;
  registerOnTouched(fn: any) : void;
}

Then register the components to the NG_VALUE_ACCESSOR token:

  providers: [
    { 
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MyAwesomeComponent(),
      multi: true
    }
  ]

Rant:

Take a step back and look at what you are doing. You are trying to build a unifying layer above form controls.

Do you want to repeat this for textareas, number inputs, email inputs...? How many validation error messages do you plan to add? What about their i18n? And the list goes on...

Your code will be no less complex than what you are trying to replace.

Do yourself a favor, abandon that ship.

Answer 3

Use a formControl="YourFormControlName" instead of formControlName for single control. For grouped controls, you always need a formGroup parent. And, when using formControl, you have to add a name and id attribute.