Javascript 在Angular 6中使用被动表单隐藏字段后，如何提交表单？

我在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;
    }

名字
名字是必需的
检查
姓氏
姓氏是必需的
提交
testFormGroup:FormGroup；
createFormGroup（）{
this.FormGroup=this.\u formBuilder.group({
名字：[''，验证器。必需]，
lastname:[''，验证程序。必需]，}）
}
onSubmit（）{
if（this.testFormGroup.invalid）{
控制台日志（“”）；
返回；
}
log（'form'，JSON.stringify（this.testFormGroup.value））；
}
isCheck；
onCheck（）{
this.isCheck=（this.isCheck==true）？false:true；
}

使用

removeControl

formGroup方法从formGroup中删除控件

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

---

您应该订阅复选框的valueChanges事件。在该订阅中，如果需要，您应该将validators设置为required。如果不需要，请清除字段的验证。如以下示例所示：

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

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();
}

---

不要用

ngIf

从DOM中隐藏它，从表单组中删除表单控件。@ritaj有时用户可能希望输入该字段。这就是为什么我没有删除它，然后在复选框单击时将表单控件返回到表单组…如何？请给我想法有时我想验证firstname和lastname。有时，我只想在用户点击复选框时选中firstname。什么是blncompany？@KumaresanPerumal抱歉，blncompany是我从自己的源代码复制的错误。它应该是形式中布尔值的名称。我怀疑会发生什么。如果用户取消勾选复选框。控件会返回吗？错误类型错误：无法读取Object.eval[as updateDirectives]（HomeComponent.html:182）处Object.debugUpdateDirectives[as updateDirectives]（core.js:11061）处checkAndUpdateView（core.js:10458）处null的属性“hasError”。我遇到了这样的错误。你的代码不起作用你的解决方案在某种情况下起作用，但在另一种情况下不起作用。哦，当然，你应该在未单击复选框时将其添加回去。