Как сделать форму действительной по условию?

Question

У меня есть бланк подтверждения:

public initStep6() {
    return this.fb.group({
      'name': ['', [Validators.required]]
    });
  }

Также у меня есть флажок на странице, если он отмечен, форма должна быть действительной, даже если имя поля пусто.

Как сделать форму действительной без заполнения полей?

Answer 1

Если я правильно понимаю, вы хотите, чтобы форма была действительной, если любое из имен имеет значение ИЛИ флажок (который вы не включили в группу форм) отмечен. Вы можете использовать пользовательскую функцию ValidatorFn на FormGroup для проверки значений в нескольких полях. Это эффективно из примера Cross Field Validation в документации проверки формы. Это будет выглядеть примерно так:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, ValidationErrors, ValidatorFn, FormBuilder, Validators } from '@angular/forms';

const myValidator: ValidatorFn = (formGroup: FormGroup): ValidationErrors | null => {
  // get controls
  const name = formGroup.get('name');
  const myCheckbox = formGroup.get('myCheckbox');

  // validate however needed, e.g. length/pattern/etc
  const isNameValid: boolean = name && name.value && name.value.length > 0;
  const isCheckboxValid: boolean = myCheckbox && myCheckbox.value && myCheckbox.value === true;

  // return null if valid otherwise return object with custom key/value
  return (isNameValid || isCheckboxValid) ? null : { 'formValid': false };
};

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  myFormGroup: FormGroup;
  name = 'Angular';

  constructor(private fb: FormBuilder) { }

  onSubmit() {
    console.log('submitted!');
  }

  ngOnInit() {
    // key thing here is passing the ValidatorFn as the 2nd argument to expose the FormGroup in the ValidatorFn rather than a FormControl
    this.myFormGroup = new FormGroup({
      'name': new FormControl(),
      'myCheckbox': new FormControl()
    }, { validators: myValidator });
  }
}

Шаблон:

<form [formGroup]="myFormGroup" *ngIf="myFormGroup" (ngSubmit)="onSubmit()">
  <div>
    <label for="name">Name:</label>
    <input type="text" name="name" id="name" formControlName="name" />
  </div>
  <div>
    <label for="myCheckbox">My Checkbox:</label>
    <input type="checkbox" name="myCheckbox" id="myCheckbox" formControlName="myCheckbox" />
  </div>
  <div>
    <button type="submit" [disabled]="!myFormGroup.valid">Submit!</button>
  </div>

  <div *ngIf="myFormGroup.errors">
    {{myFormGroup.errors | json}}
  </div>
</form>

Я создал StackBlitz , чтобы продемонстрировать функциональность, включая отключение отправки, если форма недействительна.

Надеюсь, это поможет! Если это не то, что вы ищете, вам действительно нужно добавить больше информации к вашему вопросу.