如何在Angular 6中使用反应式表单隐藏字段后提交表单？答案

【问题标题】：How to submit a form after hiding a field using reactive form in Angular 6?如何在Angular 6中使用反应式表单隐藏字段后提交表单？
【发布时间】：2018-10-12 11:34:10
【问题描述】：

我在 Angular 6 中工作。我有两个字段和复选框。我为字段名，姓氏放置了反应形式。当用户单击复选框姓氏字段将使用 *ngIf 条件隐藏时，我还有另一种情况。然后我提交表格。验证器不允许我提交表单，因为它被隐藏了。

另一种情况是，如果用户愿意，用户有时可以在字段中输入值。那么在这种情况下，我该如何提交表单呢？

    <form [FormGroup]="testFormGroup" (ngSubmit)="onSubmit()">
      <label> firstName </label>
      <mat-form-field floatLabel="never">
        <input matInput placeholder="firstName" formControlName="firstName" required>
        <mat-error *ngIf="testFormGroup.get('firstName').hasError('required')">
          firstname is required
        </mat-error>
      </mat-form-field>

      <div class="check">
          <mat-checkbox (click)="onCheck()"> check </mat-checkbox>
      </div>

      <div *ngIf="ischeck===true"> 
         <label> lastName </label>
      <mat-form-field floatLabel="never">
        <input matInput placeholder="lastName" formControlName="lastName" required>
        <mat-error *ngIf="testFormGroup.get('lastName').hasError('required')">
          lastName is required
        </mat-error>
      </mat-form-field> 

      </div>


      <button type="submit" name="submit"> submit </button>
    </form>

    testFormGroup: FormGroup; 

    createFormGroup() {
      this.FormGroup = this._formBuilder.group({
        firstname: ['', Validators.required],
        lastname: ['', Validators.required],})
    }

    onSubmit() {

      if (this.testFormGroup.invalid) {
        console.log('');
        return;
      }
      console.log('form', JSON.stringify(this.testFormGroup.value));

    }

    isCheck;

    onCheck() {
       this.isCheck = (this.isCheck === true )? false : true;
    }

【问题讨论】：

不要用ngIf从DOM中隐藏它，从表单组中移除表单控件。
@ritaj 有时用户可能希望输入该字段。这就是为什么我没有删除它
然后在复选框单击时将表单控件返回到表单组...
怎么样？请给我一个想法
有时我想验证名字和姓氏。有时我只想在用户单击复选框时检查名字。

标签： javascript validation angular5 angular6 angular-reactive-forms

【解决方案1】：

使用removeControl formGroup 方法从formGroup 中删除控件。

onCheck() {
       this.isCheck = !this.isCheck;
       if (this.isCheck) {
           this.form.removeControl('lastName');
       }
}

【讨论】：

我怀疑会发生什么。如果用户取消勾选复选框。控件会恢复吗？
错误类型错误：无法在 Object.debugUpdateDirectives [as updateDirectives] (core.js:11061) 的 Object.eval [as updateDirectives] (HomeComponent.html:182) 处读取 null 的属性“hasError” checkAndUpdateView (core.js:10458)
我收到这样的错误。你的代码不工作
您的解决方案适用于某种情况，但不适用于另一种情况。
哦，当然，你应该在没有点击复选框的时候添加回来。

【解决方案2】：

您应该订阅复选框的 valueChanges 事件。在该订阅中，如果需要，您应该将验证器设置为必需。如果您不需要，请明确验证该字段。像下面这个例子：

此外，在我的示例中，复选框是表单的一部分，如果您不需要检查复选框的更改值，请参见下面的示例。

this.testFormGroup.get('blnCompany').valueChanges.subscribe((bln)=>{      
      if(bln) this.testFormGroup.get('lastname').setValidators([Validators.required]);
      else this.testFormGroup.get('lastname').clearValidators();
      this.lasttestFormGroupname.get('lastname').updateValueAndValidity();
    })

表单中没有复选框：

onCheck(){
  if(this.isCheck)this.lasttestFormGroupname.get('lastname').setValidators([Validators.required]);
  else this.lasttestFormGroupname.get('lastname').clearValidators();
  this.lasttestFormGroupname.get('lastname').updateValueAndValidity();
}

【讨论】：

什么是blncompany？
@KumaresanPerumal 抱歉，blnCompany 是我从自己的源代码中复制的错误。它应该是表单中布尔值的名称。