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

Question

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

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

感谢您查看我的问题！实际上，我在整个表单上使用了相同的FormGroup，然后我将其分开并添加了另一个FormGroup，我的意思是像代码的另一部分和形式构建器中的验证者一样，这帮助我解决了。