Custom form control

Bonjour,

j'essaye de crée mon propre control compatible avec une reactive form, ça consiste en un ensemble de button qui permettent de choisir la valeur souhaité plutot qu'une dropdown classique, malheuresement mon formcontrol bindé dessus ne se met pas à jour.

Voici mon code, html :

Code:

1
2
3
4
5
6
7
8
9
10
<div class="button-group">
  <button mat-raised-button
          [color]="value === ref[valueName] ? 'primary' : 'basic'"
          class="mx-2" type="button"
          (click)="value=ref[valueName]"
          *ngFor="let ref of datas" [value]="ref[valueName]">
    {{ ref[textName] }}
  </button>
  {{value}}
</div>

ts

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import { Component, forwardRef, HostBinding, Input, OnInit } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { BehaviorSubject } from 'rxjs';
 
@Component({
  selector: 'app-button-group',
  templateUrl: './button-group.component.html',
  styleUrls: ['./button-group.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => ButtonGroupComponent),
      multi: true
    }]
})
export class ButtonGroupComponent implements ControlValueAccessor {
  @Input() datas: any[];
  @Input() valueName: string;
  @Input() textName: string;
 
  constructor() { }
 
  onChange: (value: any) => void = () => { };
  onTouch: any = () => { }
 
  @HostBinding('class.disabled')
  isDisabled = false;
 
  val: any;
  set value(val) {
    this.val = val
    this.onChange(val)
    this.onTouch(val)
  }
  get value() {
    return this.val;
  }
 
  writeValue(value: any): void {
    this.value = value;
  }
  registerOnChange(fn: any): void {
    this.onChange = fn;
  }
  registerOnTouched(fn: any): void {
    this.onChange = fn;
  }
  setDisabledState?(isDisabled: boolean): void {
    this.isDisabled = isDisabled;
  }
}

Mon contrôle s'affiche correctement il suit bien la sélection mais le form control bindé dessus ne se met pas à jour

Code:

1
2
3
4
<div>
      <app-button-group [datas]="refDatas | async | refDataFilter:'TaskPriority'" [formControl]="formCtrls.priorityCtrl" textName="longDesc" valueName="id"></app-button-group>
      {{formCtrls.priorityCtrl.value}}
    </div>

j'ai testé de mettre formControlName="priorityCtrl" problème similaire (aucune erreur dans la console)

voici un controle qui marche pour info :

Code:

1
2
3
4
5
6
7
8
 <mat-form-field appearance="standard">
              <mat-label>Priority *</mat-label>
              <mat-select formControlName="priorityCtrl">
                <mat-option *ngFor="let ref of refDatas | async | refDataFilter:'TaskPriority'" [value]="ref.id">
                  {{ref.longDesc}}
                </mat-option>
              </mat-select>
            </mat-form-field>

Il doit me manquer un truc mais j'arrive pas à trouver ce que c'est

est ce que tu peux mettre ça sur stackblitz ?

Hello c'était juste une erreur de copié collé dans le ts :
Code:

1 2 3 registerOnTouched(fn: any): void { this.onTouch = fn; }
Ca me modifie bien la valeur de mon formcontrol mais si je modifie le formcontrol depuis l'extérieur ça n'impact pas mon component, bon de toute façon ça me convient comme ça