Angular6中使用反应式表单隐藏字段后如何提交表单？

Question

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

Answer 1

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

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

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

Angular6中使用反应式表单隐藏字段后如何提交表单？

How to submit a form after hiding a field using reactive form in Angular 6?

javascript

validation

angular-reactive-forms

angular5

angular6