Как отправить форму после скрытия поля, используя реактивную форму в угловых 6?

Question

Я работаю в угловых 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

Вы должны подписаться на событие 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();
}

Answer 2

Удалить элемент управления из formGroup с removeControl метод formGroup.

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