Angular 如何按条件设置表单有效？

我有确认表：

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

此外，我在页面上有复选框，如果它是选中的形式应该是有效的，即使文件名是空的

---

如何在不填写字段的情况下使表单有效

如果我理解正确，那么如果名称有值或者复选框（您没有包括在表单组中）被选中，您希望表单有效。您可以使用

FormGroup

上的自定义

ValidatorFn

函数检查多个字段中的值。这有效地来自表单验证文档中的示例。它看起来像这样：

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>

姓名：
我的复选框：
提交
{{myFormGroup.errors | json}

我创建了一个示例来演示该功能，包括在表单无效时禁用提交

---

希望这有帮助！如果这不是你想要的，你真的需要在你的问题中添加更多的信息。

你不能使用

控件
获取一些表单元素。它只属于Concrete控件，该控件经过验证。
control
是一个糟糕的名称。我已将答案中的命名从
control
更新为
formGroup
，以使其在语义上更加正确，但如何将
ValidatorFn
作为第二个参数传递给
formGroup
creation，它公开了允许您获取任何控件的窗体组。如果将
验证器fn
作为参数传递给
FormControl
，则您将只能访问单个控件。但是在本例中，由于它是像
newformgroup（{}，{validators:myValidator}）
一样传递的，因此您可以访问
FormGroup
，并可以使用方法
get（）
访问控件。谢谢