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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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