web-dev-qa-db-fra.com

Pourquoi définir une chaîne vide comme nulle dans une forme réactive devient une chaîne vide

J'essaie de convertir chaque entrée de chaîne en null lors de cahnge. Je crée donc une directive pour écouter chaque changement et attribuer null à une chaîne vide.

Et voici le HTML

<form [formGroup]="form" class="mt-4 p-2" (ngSubmit)="onSubmit()">
  <input nbInput fullWidth fieldSize="small" shape="semi-round" formControlName="AuthorityNum" EmptyToNull>
</form>

Voici le code de la directive:

import { Directive, Input, HostListener, ElementRef } from 
'@angular/core';

@Directive({
selector: '[EmptyToNull]'
})
export class NullValueDirective {

 constructor() {
 }

 @HostListener('change', ['$event.target.value']) onKeyDowns(value) {
 if (value === '') {
  value = null;
  console.log(value) // print: null
  }
 }
}

Il semble qu'il change la valeur en null

Mais lorsque je soumets le formulaire et inspecte le formulaire, il apparaît à nouveau comme une chaîne vide.

pourquoi?

Mise à jour :

Voici ma fonction de soumission:

onSubmit() {
 // TODO: Send to server
  this.form.value.AuthorityNum === '' // true
  }

Voici le code sur stackblitz: https://stackblitz.com/edit/angular-ilcg7y

angulartypescripteventsdirective
3
user384496

Code de directive:

import { Directive, HostListener, Self } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({ selector: '[EmptyToNull]' })
export class EmptyToNullDirective {
  constructor(@Self() private ngControl: NgControl) {}

  @HostListener('keyup', ['$event']) onKeyDowns(event: KeyboardEvent) {
    if (this.ngControl.value?.trim() === '') {
        this.ngControl.reset(null);
    }
  }
}

Modèle:

<input nbInput fullWidth fieldSize="small" shape="semi-round" formControlName="AuthorityNum" EmptyToNull>
0
Aleksandr Yatsenko

J'essaie de comprendre votre objectif en utilisant la directive EmptyToNull.

Si vous essayez d'éviter de transmettre des valeurs vides dans le formulaire, vous pouvez mieux utiliser les validateurs lorsque vous créez le formulaire dans vos ts:

this.form = this.formbuilder.group({
               date: [''],
               AuthorityNum: ['', [Validators.required]],
            });

En savoir plus sur les validateurs: https://angular.io/api/forms/Validators

Lorsque vous soumettez le formulaire, vous pouvez également vérifier que les valeurs remplissent les validateurs que vous avez définis:

 onSubmit() {
    Object.keys(this.form.controls).forEach(field => {
       let control = this.form.get(field);
               control.markAsTouched({
                   onlySelf: true
               });
               control.updateValueAndValidity();
       });
 }

Vous pouvez également essayer les approches suivantes dans votre TS lorsque vous soumettez le formulaire ou détectez des modifications dans le formulaire:

this.form.reset({
        date: { value: '' },
        AuthorityNum: { value: null }
});

Ou même appliqué dans votre directive:

this.form.controls['AuthorityNum'].setValue(null);

J'espère que ça aide!

0
Santironhacker