Pas besoin de s'abonner à Observable, un moyen impératif d'éditer les données de formulaire réactifs en Angular

Question

Voici le processus que j'ai utilisé pour m'abonner et mettre à jour un formulaire réactif basé sur des données observables.

Il existe peut-être un moyen de résoudre le problème sans souscrire à l'observable et sans changer la valeur.

@Component({
  selector: 'app-my-component',
  template: `
    <form [formGroup]="myForm">
      <input formControlName="name" />
      <input formControlName="email" />
    </form>
  `,
})
export class MyComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder, private ds: DataService) {}

  ngOnInit() {
    this.myForm = this.fb.group({
      name: '',
      email: '',
    });

    ds.data$.subscribe((data) => {
      this.myForm.setValue({
        name: data.name,
        email: data.email,
      });
    });
  }


}

Answer 1

En règle générale, une façon d'éliminer les abonnements consiste à utiliser un canal asynchrone dans un wrapper

@Component({
  template: `<app-user-form-component *ngIf="user$ | async as user"  [user]="user"/>`,
  // closed tag is a new feature of angular
  selector: 'app-update-user-form-container'
}) 
class UpdateUserFormContainer {
  user$ = inject(DataService).data$;
}

Le formulaire lui-même peut gérer les mises à jour utilisateur dans NgOnInit ou NgOnChanges (s'il est probable qu'il y ait plusieurs mises à jour et que la définition des valeurs du formulaire est importante dans ce cas)

export class MyComponent implements OnInit {
  myForm = inject(NonNullableFormBuilder).group({
     name: '',
     email: '',
  }); // this way form is not just FormGroup but the type is inferred from fields
  // i.e. this.myForm.getRawValue() would return you {name: string, email: string};
  @Input({required: true}) user1: User; // required input is new feature of angular
  
  ngOnChanges(changes: SimpleChanges) {
    if('user' in changes) {
      this.myForm.setValue({
       name: this.user.name,
       email: this.user.email,
     })
    }
  }
}

Remarque : Certaines fonctionnalités angulaires très avancées sont utilisées dans cet exemple. Il est possible de suivre le même schéma, mais vous n'avez pas nécessairement besoin d'utiliser toutes les fonctionnalités