web-dev-qa-db-fra.com

Angular 7 valeurs de réglage de la forme réactive sur le chargement du composant, activez le bouton Enregistrer même si la forme n'est pas validée

J'ai le problème suivant. Cliquez pour vérifier le blitz de pile .

Je mets une forme réactive dans le constructeur:

this.formGroup = this.fb.group({
      'family_name_en': new FormControl('', Validators.required),
      'family_name_ar': new FormControl('', [Validators.required, Validators.pattern('[\u0600-\u06FF ]*')]),
      'unit_id': new FormControl({ value: '', disabled: true }, [Validators.required])
});

Et dans le crochet ngOnInti(), j'obtiens les données relatives au unit_id.

Comme je migre des données d'une plateforme à une autre, le nom de famille en arabe n'était pas recommandé, mais il l'est maintenant. La plupart des données seront donc chargées sans le nom arabe.

Le problème est que le bouton est toujours activé, et ce que je dois faire, c'est si un utilisateur veut mettre à jour ce unit_id, Il doit ajouter le nom arabe pour que le bouton soit activé.

Si le formulaire est valide, pas de mal à activer le bouton en charge du composant.

Voici la méthode getData() qui récupère les données et définit les valeurs des contrôles du groupe de formulaires:

ngOnInit() {
    this.getDataById();
}

getDataById ():

getDataById() {
    this.showSpinner = true;
    this.auth.getDataById(this.unit_id).subscribe(
      (data) => {
        if (data['info'][0]['total'] == 1) {
          this.noDataBool = false;
          this.showSpinner = false;
          this.family_name_en = data['info'][0]['hh_last_name_en'];
          this.formGroup.controls['family_name_en'].setValue(this.family_name_en);
          this.family_name_ar = data['info'][0]['hh_last_name_ar'];
          this.formGroup.controls['family_name_ar'].setValue(this.family_name_ar);
          this.unit_id = data['info'][0]['unit_id'];
          this.formGroup.controls['unit_id '].setValue(this.unit_id);
    }
}

Le bouton:

<button mat-raised-button color="warn" (click)="updateData()" [disabled]="!formGroup.valid">
    <mat-icon>update</mat-icon>Update
</button>
angularangular6angular-reactive-formsangular7
4
alim1990

Au lieu d'accéder directement à FormControls en utilisant controls sur formGroup, vous devez utiliser l'API get dessus. Cela vous donnerait plus de contrôle et nettoierait considérablement votre implémentation (en particulier en cas d'obtention d'éléments profondément imbriqués). Vous pouvez changer l'implémentation des composants comme ceci:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  formGroup: FormGroup;
  titleAlert: string = 'This field is required';
  post: any = '';
  family_name_en;
  family_name_ar;
  unit_id;
  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.formGroup = this.fb.group({
      'family_name_en': new FormControl('', Validators.required),
      'family_name_ar': new FormControl('', [Validators.required, Validators.pattern('[\u0600-\u06FF ]*')]),
      'unit_id': new FormControl({ value: '', disabled: true }, [Validators.required])
    });
    this.getDataById();
  }

  getDataById() {
    let data: Array<any> = [
      'ALi', '', '123'
    ]
    this.family_name_en = data[0];
    this.formGroup.get('family_name_en').setValue(this.family_name_en);
    this.family_name_ar = data[1];
    this.formGroup.get('family_name_ar').setValue(this.family_name_ar);
    this.unit_id = data[2];
    this.formGroup.get('unit_id').setValue(this.unit_id);
  }

}

Voici un StackBlitz mis à jour pour votre référence. Vous pouvez le tester en tapant علي dedans, ce qui activerait le bouton Mettre à jour. Taper ALi le laissera désactivé.

7
SiddAjmera

J'utilise toujours le code suivant dans des situations comme celle-ci:

this.family_name_ar.setValue(data['info'][0]['hh_last_name_ar']);
this.family_name_ar.updateValueAndValidity();

En appelant la deuxième méthode, updateValueAndValidity() nous disons Angular to

Recalculez la valeur et l'état de validation du contrôle.

Plus d'informations sur le Angular Docs .

Maintenant, le bouton doit être désactivé et le formulaire invalide si le data['info'][0]['hh_last_name_ar'] Est vide.

Vous pouvez utiliser les méthodes ci-dessus pour chaque champ dont vous avez besoin.

1
Mihail Stancescu