单击隐藏和显示的切换时，表单字段将生效

Question

I'm showing the part of the form to hide and show when clicking on the button. the form fields are becoming invalid before on click of the button itself which is annoying for the end user.

app.component.html: 

      <div class="row">
          <h3>
            <button mat-button (click)="toggle()">
              Change password
            </button>
          </h3>
        </div>
        <div *ngIf="hidden">
          <div fxLayout="row" fxLayoutAlign="center stretch">
            <div fxLayout="column" fxFlex="80">
              <label> Current password :</label>
              <mat-form-field appearance="outline">
                <input formControlName="oldPassword" type="password" matInput 
                 placeholder="Current password">
              </mat-form-field>
              <mat-error
                *ngIf="profileForm.get('oldPassword').hasError('required') && 
                 profileForm.get('oldPassword').touched">
                Password is required
              </mat-error>
            </div>
          </div>
       </div>

app.component.ts:

 toggle(){
    this.hidden = !this.hidden; 
  }

Answer 1

Thanks for viewing my issue! Actually, I was using the same formGroup for the whole form, then I separated it and added another formGroup I mean like another form for the part of the code and validations in form builder this helped me to resolve.