Angular template driven form: input "component" not binding to form

Question

I'm trying to generate form fields dynamically based on some JSON object(config). This said config object contains all the attribute values required for constructing form fields(ex: label, type, placeholder etc).

Setup

In my parent component: I have a form, under which I have an ngFor, iterating over the config object, trying to generate the fields.

<form #dynamicForm="ngForm">
  <div *ngFor="let field of formFields">    <!-- formFields is the config object -->
    <app-form-field [props]="field" [formData]="formData"></app-form-field>
  </div>
  <button [disabled]="!dynamicForm.form.valid">Submit</button>
</form>

To avoid clogging the parent component, I have created a generic <form-field> component, which takes all the field attributes(as props) and a reference object(to bind the field's value).

<div *ngIf="props.type === 'text'">         <!-- One div for each input type -->
  <label [for]="props.id">{{ props.label }}</label>
  <input
    #field="ngModel"
    [id]="props.id"
    [type]="props.type"
    [attr.name]="props.name"
    [placeholder]="props.placeholder"
    [(ngModel)]="formModel[props['apiDataKey']]"
    [required]="props.isRequired"
    [disabled]="props.isDisabled"
  >
</div>

<!-- Other input types here -->

Question

The form tag contains a local reference #dynamicForm="ngForm" -> which never seems to update.

While the individual field validations work perfectly fine, the main form(dynamicForm.value) seems to:

contain no data
as a result of which, the form always shows as valid (dynamicForm.form.valid is always true)

I've created a demo on stackblitz here: https://stackblitz.com/edit/angular-ivy-nvm4hd?file=src/app/app.component.html

PS: I'm pretty new to angular2+, and can't seem to figure out what it is that I'm missing.

Thanks a bunch in advance 🙂

Siddhant · Accepted Answer · 2021-12-28 16:03:56Z

2

In the Child Component viewProviders array, we can provide ControlContainer to use existing NgForm instance:

@Component({
 ...,
 viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
export class FormFieldComponent implements OnInit {
 ...
}

answered Dec 28, 2021 at 16:03

Siddhant

3,2112 gold badges10 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

maiermic Over a year ago

This leads to an error "Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.", see stackblitz.com/edit/…

Collectives™ on Stack Overflow

Angular template driven form: input "component" not binding to form

Setup

Question

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Setup

Question

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related