injectForm utility

[ShacharHarshuv]

Binding Validation Information to View

A common use case, is to display an Asterix next to a required field label, or a message bellow a field. We would ideally want to implement this behavior once for our design system, so that it will work with all custom controls.

There are two possible architectures here:

Field wrapper:

<!-- consumer.html -->
<app-form-field>
  <app-form-label>Name</app-form-label>
  <app-text-field [form]="nameForm"/>
</app-form-field>

Label inside the field:

<!-- consumer.html -->
<app-text-field 
   label="Name"
   [form]="nameForm"
/>

<!-- text-field.component.html -->
<app-field-frame>
   <app-form-label>{{label}}</app-form-label>
   ... <!-- text field implementation -->
</app-field-frame>

The difference is that in the first use case the form directive is used as a child of the component in which we want to access it form, and the second use-case the form directive is a parent of the component we want to access it from.

Accessing form of parent

To access the form of a parent, you can use the utility injectForm(). It will return a Form object if there is a parent that uses it. If there is more than one, it will return the first one from the bottom.

Now, for example, if you want to check whether the form is required, you can do this:

readonly isRequired = computed(() => {
  return getFormValidators(this.form).includes(required);
});