Angular, How to use Toggle to send or prevent send specific parameter to backend-CodePudding

I need help to solve this problem I have a program that sends parameters to the backend containing a name, and gender.

Gender determination is optional, not required. The idea is that I want to put a toggle, if the user opens it, it shows him Drop down in which there is a male and a female and he selects the gender, But if he does not want to specify the gender and closes the toggle, and therefore this parameter will not be sent to the backend. The issue I'm having is that after the user selects the gender and closes the toggle, this parameter is sent.

I want as soon as the user to undo this decision and close the toggle, meaning what; sending gender to backend depends on Toggle if open will send if close will not send

app.component.html

         <mat-slide-toggle (click)="toggleGender()">Gender</mat-slide-toggle>
                <div *ngIf="gender">
                    <mat-form-field appearance="fill"  >
                        <mat-label>Gender</mat-label>
                        <mat-select  formControlName="genderMF" >
                          <mat-option [value]="'male'"> Male </mat-option>
                          <mat-option [value]="'female'"> Female </mat-option>

                        </mat-select>
                      </mat-form-field>
                </div>

app.component.ts

       import { Component, OnInit, Input } from '@angular/core';
       import { FormControl, FormGroup,  Validators } from '@angular/forms';

       @Component({
               selector: 'app-root',
               templateUrl: './app.component.html',
               styleUrls: ['./app.component.css']
       })
      export class AppComponent implements OnInit {
             form: FormGroup = new FormGroup({
                  name: new FormControl(null, [Validators.required]),
                  genderMF: new FormControl(null),
      });


       gender:boolean = true;

       constructor() { }

       ngOnInit(): void {}


       toggleGender() {
          this.gender = !this.gender;
       }

     }

CodePudding user response：

Assuming that genderMF is what determines the optional param we could, for example, change this to null when checked event is false;

<mat-slide-toggle (change)="toggleGender($event)">Gender</mat-slide-toggle>

  toggleGender(event: MatSlideToggleChange) {
    this.gender = event.checked;
    if (event.checked === false) {
      this.myForm.controls.genderMF.setValue(null);
    }
  }

In your query composer check for genderMF value with a simple if to either append it, or not.

CodePudding user response：

You can use disable to avoid values in reactive form. Disable the field through TS:

  toggleGender(): void {
    this.gender = !this.gender;
    const genderFormControl = this.form.controls.genderMF;
    this.gender ? genderFormControl.enable() : genderFormControl.disable();
  }

Here is an example on stackblitz