Discussion :

[youtpout978]

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

[krakatoa]

est ce que tu peux mettre ça sur stackblitz ?

[youtpout978]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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