1
votes

Validation angulaire de la date basée sur le champ croisé

J'ai une forme angulaire réactive dans laquelle je veux valider la date d'admission de telle sorte que sa date minimale soit Date de naissance, comment puis-je la valider en fonction du champ

composant ts:

<div>
  <div class="container">
  <main class="col-12"><h3 class="bd-title" id="content">Cross Field Validation Date</h3>
<br>
<form  [formGroup]="userForm">
<div  class="form-group">
    <label>Birth Date</label>
    <input type="text" formControlName="birthDate" class="form-control"  />

</div>
<app-plan-admission-date [admissionDateControl]="userForm.controls.admissionDate"></app-plan-admission-date>

<button [disabled]="!userForm.valid" class="btn btn-primary">Submit</button>
</form></main>
</div>
</div>

Html:

    ngOnInit(){
    this.userForm = this.formBuilder.group({
      'birthDate':[''],
      'admissionDate': ['']
      });
    }
    }

    @Component({
      selector: 'app-plan-admission-date',
      template: 
  <div  class="form-group">
    <label>Admission Date</label>

    <input type="text" [formControl]="admissionDateControl" class="form-control"  />
  </div>

    })
    export class AdmissionDateComponent  {
      @Input() admissionDateControl:AbstractControl;
    }

Est-il possible de valider la date en utilisant un champ croisé sans faire de validation personnalisée dans angulaire

Stackblitz: https: //stackblitz.com/edit/cross-field-date-validation-in-angular

angular angular-reactive-forms

0 commentaires

4 Réponses :

1
votes

Vous avez raison, vous pouvez le faire via un validateur personnalisé, cela devrait ressembler à ceci (validation des dates mise à part):

export function DateMoreThan(controlName: string, thanControlName: string) {
  return (formGroup: FormGroup) => {
    const control = formGroup.controls[controlName];
    const thanControl = formGroup.controls[thanControlName];

    if (control.errors && !control.errors.mustBeMoreThan) {
      return;
    }

    if (new Date(control.value) < new Date(thanControl.value)) {
      control.setErrors({ mustBeMoreThan: true });
    } else {
      control.setErrors(null);
    }
  }
}

Où nous comparons la date du contrôle avec le nom controlName pour contrôler avec le nom thanControlName . Ici fonctionne exemple sur stackblitz . J'espère que cela vous aidera.

4 commentaires

Je veux une autre façon de valider, je veux créer une fonction de validation personnalisée @Amir

Il s'agit d'une fonction de validation personnalisée, jetez un œil à l'exemple et voyez comment elle est enregistrée dans formcontrol

Je ne souhaite pas utiliser la fonction de validation personnalisée Étant donné que mon formulaire contient de nombreux champs et que ce n’est pas la méthode recommandée pour placer le validateur au niveau du groupe de formulaires, avez-vous d’autres alternatives?

Vous pouvez le faire en utilisant le service, par exemple, mais vous devrez définir manuellement les erreurs pour les contrôles.

3
votes

Au lieu de créer une fonction de validation personnalisée, vous pouvez utiliser la validation minDate de @rxweb Voici le code:

ngOnInit(){
this.userForm = this.formBuilder.group({
  'birthDate':[''],
  'admissionDate': ['',RxwebValidators.minDate({fieldName:"birthDate"})]
  });
 }
}

Voici le Stackblitz fourchu

0 commentaires

0
votes

si vous effectuez une validation sur un contrôle, vous pouvez utiliser parent pour obtenir le formGroup

this.userForm = this.formBuilder.group({
  'birthDate':['11/12/2016'],
  'admissionDate': ['11/12/2016',DateMoreThan('birthDate')]
  });
}

export function DateMoreThan(thanControlName: string) {
  return (control: AbstractControl) => {
    if (!control.parent)
      return null
    const formGroup=control.parent as FormGroup;
    const thanControl = formGroup.controls[thanControlName];

    if (thanControl)
    {
       const [day, month, year] = control.value.split("/")
       const [day2, month2, year2] = thanControl.value.split("/")
       return new Date(year2,month2-1,day2).getTime()>new Date(year,month-1,day).getTime()?
           { mustBeMoreThan: true }:null
    }
  }
}

0 commentaires

0
votes

Comme le montre l'exemple ci-dessous, nous pouvons créer un validateur personnalisé afin de comparer deux champs dueDate et repeatUntilDate. Et puis nous pouvons appliquer ce validateur à l'instance formGroup présente dans la classe de composant. Pour obtenir des explications plus détaillées sur l'utilisation du validateur personnalisé pour les formulaires réactifs, regardez cette vidéo a>.

export const dateValidator: ValidatorFn = (control: FormGroup) : ValidationErrors | null => {
  const dueDate = control.get('dueDate');
  const recurrenceType = control.get('recurrenceType');
  const repeatUntil = control.get('repeatUntil');

  return dueDate && recurrenceType && repeatUntil && recurrenceType.value != 'NONE'
  && dueDate.value >= repeatUntil.value ? {dueDateGtEqRepeatUntil: true} : null;
};

0 commentaires