Angular 表单字段在单击隐藏和显示切换时进行验证

我正在显示表单中单击按钮时要隐藏和显示的部分。 在点击按钮本身之前，表单字段将变得无效，这对最终用户来说很烦人

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>

---

感谢您查看我的问题！

---

实际上，我对整个表单使用了相同的表单组，然后我将其分离并添加了另一个表单组，我的意思是，在form builder中的代码和验证部分使用了另一个表单，这帮助我解决了问题。

感谢您查看我的问题！

---

实际上，我对整个表单使用了相同的表单组，然后我将其分离并添加了另一个表单组，我的意思是，在form builder中的代码和验证部分使用另一个表单，这有助于我解决问题。

请分享一个关于stackblitz的。。。这将使帮助更容易请创建一个作为Stackblitz，或者至少在您的问题中创建代码。请在Stackblitz上共享一个。。。这将使帮助更容易请创建一个作为Stackblitz，或至少在您的问题代码。

app.component.ts:

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