web-dev-qa-db-fra.com

Angular formes réactives, ajout et suppression de champs?

lors de la construction de l'application crud dans angular 5 J'ai rencontré une question, comment puis-je utiliser le même générateur de formulaire mais changer les contrôles de formulaire que j'obtiens en fonction de ce que je veux, ajouter ou mettre à jour des utilisateurs à travers la forme ...

Voici un code simple, je vais essayer de ne pas compliquer les choses, car j'ai une forme assez grande avec beaucoup d'attributs ...

Donc, dans mon app.component.html, j'ai un formulaire

         <form class="form-horizontal" [formGroup]="form" #myForm="ngForm" 
          (ngSubmit)="save()"> 
                <div class="form-group">
                    <label for="firstName" class="control-label 
                  required">First name</label>
                    <input type="text" id="firstName" class="form-control" 
             formControlName="firstName">


                </div>

                <div class="form-group">
                    <label for="lastName" class="control-label 
            required">Last name</label>
                    <input type="text" id="lastName" class="form-control" 
            formControlName="lastName"> 
                </div>

et dans mon app.component.ts

dans mon constructeur j'ai

    this.form = this.formBuilder.group({ 
        firstName: ['', [Validators.required, Validators.minLength(2), 
   Validators.pattern(/^[a-zA-Z]+$/)]],
        lastName: ['', [Validators.required, Validators.minLength(2), 
   Validators.pattern(/^[a-zA-Z]+$/)]],

    });

et fonction save () pour soumettre le formulaire

    save() {
    let formModel = this.form.value;
    formModel.id = this.Id;

    if (this.Id == null) { 
        this._usermanagementservice.addEmployee(formModel).subscribe(() => {

           //function that reloads table with employees
            this.LoadAllEmployees();
        });
    }
    else {
        this._usermanagementservice.updateEmployee(this.Id, formModel).subscribe(() => {
            this.LoadAllEmployees();
        });
    }
}

A noté que tout fonctionne, je n'ai pas inclus d'autres champs, mais voici la question, comment puis-je inclure uniquement le formulaire pour le champ du prénom lors de l'ajout d'un utilisateur et avoir SEULEMENT le nom de famille pour la mise à jour? (pour simplifier les choses, j'utilise cet exemple prénom et nom)

Merci, si vous avez besoin de plus d'informations, je me ferai un plaisir de leur fournir Ps. l'anglais est ma langue secondaire, donc les termes comme les champs, les formulaires et etc. sont à coup sûr incorrects, j'espère que vous comprendrez

angularangular-reactive-forms
7
Questions

Vous pouvez d'abord créer un groupe de modèles de base de votre option. Nous pouvons utiliser * ngIf dans le modèle pour masquer et afficher un groupe d'éléments sous forme. Ensuite, utilisez formBuilder pour créer une instance de formulaire à chaque fois que vous passez uniquement l'objet des contrôles de formulaire qui sont activés.

Modèle

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<label for="name">First Name:</label>
<input type="text" formControlName="fname"
placeholder="Enter name">
<br /><br />
<div *ngIf="lNameEmail1">
<label for="name">Last Name:</label>
<input type="text" formControlName="lname"
placeholder="Enter name">
<br /><br />
<label for="email">Email:</label>
<input type="email" formControlName="email"
placeholder="Enter email">
</div>
<div *ngIf="lNameEmail2">
<label for="name">Last Name2:</label>
<input type="text" formControlName="lname2"
placeholder="Enter name">

<br /><br />

<label for="email">Email2:</label>
<input type="email" formControlName="email2"
placeholder="Enter email">
</div>
<br /><br />
<button type="submit" [disabled]="!myForm.valid">Submit
</button>
<button type="submit" (click)='formGrp1()'> Form 1</button>
<button type="submit" (click)='formGrp2()'> Form 2</button>
</form>

Classe angulaire

export class AppComponent implements AfterViewInit {
        public myForm: FormGroup;
        lNameEmail1 = false;
        lNameEmail2 = false;
        myFormProperty1 = {
        "fname": new FormControl("", Validators.required)
        };

        myFormProperty2 = {
        "fname": new FormControl("", Validators.required),
        "lname": new FormControl("", Validators.required),
        "email": new FormControl("")

        };
        myFormProperty3 = {
        "fname": new FormControl("", Validators.required),
        "lname2": new FormControl("", Validators.required),
        "email2": new FormControl("")

        };

        constructor(public fb: FormBuilder) {
        this.myForm = this.fb.group(this.myFormProperty1);
        }


        formGrp1(){
        alert('Form 1 enable')

        this.lNameEmail1 = true;
        this.lNameEmail2 = false;

        this.myForm = this.fb.group(this.myFormProperty2);


        this.myForm.valueChanges.subscribe(data =>
        console.log('form object ====' + JSON.stringify(data)
        )); 
        }
        formGrp2(){
        alert('Form 2 enable')
        this.lNameEmail1 = false;
        this.lNameEmail2 = true;

        this.myForm = this.fb.group(this.myFormProperty3);

        this.myForm.valueChanges.subscribe(data =>
        console.log('form object ====' + JSON.stringify(data)
        )); 

        }
        onSubmit() {
        console.log('Form submitted Value=='+ JSON.stringify(this.myForm.value));
        }

    }
0
Abhimanyu

L'API FormGroup expose des méthodes telles que addControl et removeControl que vous pouvez utiliser pour ajouter ou supprimer des contrôles de votre groupe de formulaires après son initialisation .

Un exemple utilisant ces méthodes pourrait ressembler à ceci:

formMode: 'add' | 'update';
userForm: FormGroup;

ngOnInit() {
  this.form = this.formBuilder.group({ 
    firstName: [''],
    lastName: ['']
  });
}

changeMode(mode: 'add' | 'update') {
  if (mode === 'add') {
    if (!this.form.get('firstName')) {
      this.form.addControl('firstName');
    }
    this.form.removeControl('lastName');
  } else {
    if (!this.form.get('lastName')) {
      this.form.addControl('lastName');
    }
    this.form.removeControl('firstName');
  }
}

onChange(event: 'add' | 'update') {
  this.changeMode(event);
}

Vous souhaiterez probablement que votre DOM reflète l'état de votre formulaire en ajoutant *ngIf contrôles basés sur l'existence d'un contrôle donné:

<input *ngIf="form.get('lastName')" formControlName="lastName">
18
vince

addControl RemoveControl utilisant u peut masquer et afficher vos champs.

<div>
    <label>Description<i class="fa fa-pencil" aria-hidden="true" (click)="editField(formControlKeys.description)"></i></label>
    <h6 *ngIf="!detailForm.controls.description; else showDescriptionField">{{ projectData?.description }}</h6>
    <ng-template #showDescriptionField>
      <textarea formControlName="description" class="form-control" rows="2"></textarea>
      <i class="fa fa-close" (click)="removeDescriptionControl()"></i>
    </ng-template>
  </div>

Ajouter un contrôle:

editField(this.formControlKeys.description){
        this.detailForm.addControl('description', new FormControl(''));
        this.detailForm.controls['description'].setValue(this.projectData.description);
}

supprimer le contrôle:

 removeDescriptionControl() {
    this.detailForm.removeControl('description');
  }

créez d'abord le groupe de formulaires:

 this.detailForm = this.formBuilder.group({
    });

définir formControlKeys:

formControlKeys = {
    description: 'description'
  };
1
kiran kirtkar

Il s'agit de la réplication la plus simple de l'ajout/suppression pour les contrôles de formulaire conditionnels angular).

Voyant que vous avez un formulaire avec un contrôle de case à cocher nommé someCheckboxControl surveillez ses modifications booléennes pour ajouter/supprimer l'autre contrôle.

ngOnInit() {
   this.form.controls['someCheckboxControl'].valueChanges.subscribe(someCheckboxControlVal => {
       if (someCheckboxControlVal) {
           this.form.addControl('SomeControl', new FormControl('', Validators.required));
       } else {
           this.form.removeControl('SomeControl');
       }
   });
}

HTML

<input *ngIf="form.get('someCheckboxControl').value" formControlName="remoteLocations"</input>
0
Ben Racicot