Custom type model/change binding

[tiger5226]

I need some direction. I like the docs I have seen. However, I am looking to create custom field types. I am trying to understand from existing implementations how model/change binding/propagation works. I do not see any details at this level anywhere in the docs.

For example, as I am new, I have taking the jsonschema advanced example as a starting point. I wanted to try to create a color picker(I have seen other examples, but I am trying to learn instead of copy). I am using PrimeNG components, so naturally using p-colorpicker. There is a 2-way binding for the color to that component by default. From the implementations I see, and from trying it, 2-way binding is not allowed. The model is read-only. So naturally, you just use input binding on the model value (existing value), and then you implement the (onChange) emitter. However, then how to update the model from that function?

The model is read only. I have seen other examples in the existing implementations like:

props.change && props.change(this.field, event);

However, this has no impact. Are there docs on how to implement? Specifically, that tell me how this all works and what it means to change the model and its binding? I saw in the docs where it says what it is based on. Should I read through those docs first?

I don't want to ask silly questions, but I feel like I am spinning my wheels a bit and am digging into the codebase, hopefully not over doing it, and it appears there are some really great devs that use this project heavily from the issues list. Hoping I can get a helping hand, to give me a better direction to start from. Thanks again in advance! Excellent project!

[tiger5226]

I think I figured it out actually. Some important first timer notes especially those using PrimeNG:

• While PrimeNG makes extensive use of [(ngModel)], when it comes to forms the preference is to use FormControl. As of angular 6 these two cannot be used together.
• FormControl is much nicer for creating forms naturally. Any component you create that manages a value. Above I use p-colorpicker, need the [formControl]="formControl" attribute set.
• The model will get automatically bound via the FormControl just like ngModel but better and in a more generic way.
• Since FormControl is 2-way binding as well, you don't really need the (onChange)="props.change && props.change(field, $event)" update.

Formly is amazing in how almost everything is completely automated. However, it took me some time to figure out how all of this was working. I guess it was good in case some new user wants more information, or a quicker start than I had this weekend.

So what does a color type with picker look like?

import {Component} from '@angular/core';
import {FieldType, FieldTypeConfig} from '@ngx-formly/core';

@Component({
  selector: 'formly-color-type',
  template: `
    <div class="mb-3">
      Model Value: {{field.model?.mycolor}}
      <p-colorPicker [formlyAttributes]="field" [formControl]="formControl"></p-colorPicker>
    </div>
  `,
})
export class ColorTypeComponent extends FieldType<FieldTypeConfig>{}

It ends up being so much easier than you would even think, once you get past the [(ngModel)] vs FormControl thing.

[KakashiOfAnbu]

i have this issues when trying to implements multiple formcontrol in 1 field, the model just wont update whenever the fields change. I thinks it works fine in version 5.0.0 but in 6.1.1 it doesnt works anymore since I followed the first implementation #1222. Here is my implementation for 6.1.1, if you can give it a look and address the issue i am really thankful: https://stackblitz.com/edit/angular-ivy-rabcxg?file=src/app/app.component.html

[aitboudad]

This issue has been fixed and released as part of v6.2.1 release.

Please let us know, in case you are still encountering a similar issue/problem.
Thank you!