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

使用var image = domtoimage.toBlob(document.getElementById('form')); var blob = new Blob([image], {type: "image/png"}); saveAs(blob, 'myimage.png'); formGroup方法从formGroup中删除控件。

removeControl

Answer 2

您应该订阅复选框的valueChanges事件。在该订阅中，如果需要，则应将验证器设置为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();
}

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

2 个答案: