Angular 角度形式总是返回无效？

我有一个带有三个复选框的角度反应形式：

第一个复选框是查看用户是否希望保持匿名。如果用户未选中此选项，则名称字段将保留。如果选中，则“名称”字段将隐藏。 第二个复选框用于显示电子邮件字段。如果选中，则会显示电子邮件字段。如果未选中，则不会显示电子邮件字段。 第三个复选框是“同意”复选框。用户必须选择此选项才能提交表单。 我的问题是，即使所有这些要求都得到满足，提交表格仍然是无效的。我希望我的submissionForm.valid返回true。这是我的提交表单组件：

编辑：多亏了注释中的答案，我看到我的所有字段都返回空值。谁能帮我把这个也修好吗？我觉得我正确地初始化了所有内容，但我仍然不明白为什么值返回为null。 从“@angular/core”导入{Component，OnInit}； 从'@angular/forms'导入{FormGroup，Validators，FormBuilder}； @组成部分{ 选择器：“应用提交”， templateUrl:“./submission form.component.html”， 样式URL：[ “./submission form.component.scss” ] } 导出类SubmissionFormComponent实现OnInit{ 提交形式：FormGroup； formSubmitted=false；//保存表单的状态 专用名称验证程序=[ Validators.minLength1， Validators.maxLength50 ]; 专用电子邮件验证程序=[ Validators.maxLength250， 电子邮件 ]; 构造函数私有fb:FormBuilder{} ngOnInit:void{ 这个.createForm； } createForm:void{ this.submissionForm=this.fb.group{ 匿名：[]， 名称：[，this.nameValidators]， 联系人：[]， 电子邮件：[，this.emailValidators]， contentWarning:[，[Validators.required]]， 标题：[，验证器。必需]， 消息：[，[Validators.required，Validators.minLength10，Validators.maxLength10000]]， 同意：[false，[Validators.requiredTrue]] }; } 提交{ 如果此.submissionForm.get'anonymous'。值==false{ this.submissionForm.get'name'。setValidatorsthis.nameValidators.concatValidators.required； }否则{ this.submissionForm.get'name'.setValidatorstThis.nameValidators； } 如果此.submissionForm.get'contact'.value==true{ this.submissionForm.get'email'。setValidatorsthis.emailValidators.concatValidators.required； }否则{ this.submissionForm.get'email'。setValidatorsthis.emailValidators； } this.formSubmitted=true；//表单已提交 console.logthis.submissionForm.valid； 如果此.submissionForm.valid{ console.log'submissionForm'，this.submissionForm.value；//处理表单 } } get anonymous{返回this.submissionForm.get'anonymous'}； 获取名称{返回this.submissionForm.get'name}； 获取联系人{返回this.submissionForm.get'contact}； 获取电子邮件{返回此.submissionForm.get'email}； get-contentWarning{返回this.submissionForm.get'contentWarning'}； 获取标题{返回this.submissionForm.get'title}； 获取消息{返回this.submissionForm.get'message'}； get agree{返回此.submissionForm.get'agree'}；

---

} 即使您隐藏了这些字段，表单仍然要求值满足其验证器规则

要在名称、电子邮件字段中禁用验证器，您需要禁用被动表单字段

if (this.submissionForm.get('anonymous').value == false) {
  this.submissionForm.get('name').enable()
}
else{
  this.submissionForm.get('name').disable();
}

以rxjs的方式使用if-else会更好

this.submissionForm.get('anonymous').valueChanges.subscribe(
  value => {
    if (value == false) {
      this.submissionForm.get('name').enable()
    }
    else{
      this.submissionForm.get('name').disable();
    }
  }
)

---

即使您隐藏了这些字段，表单仍然要求值满足其验证器规则

要在名称、电子邮件字段中禁用验证器，您需要禁用被动表单字段

if (this.submissionForm.get('anonymous').value == false) {
  this.submissionForm.get('name').enable()
}
else{
  this.submissionForm.get('name').disable();
}

以rxjs的方式使用if-else会更好

this.submissionForm.get('anonymous').valueChanges.subscribe(
  value => {
    if (value == false) {
      this.submissionForm.get('name').enable()
    }
    else{
      this.submissionForm.get('name').disable();
    }
  }
)

---

由于您的字段只有在可见时才必须遵循某些规则，并且其可见性状态取决于其他控件的值，因此您必须编写一些自定义验证器。有两种方法可以做到这一点：将自定义验证器直接应用于控件，或将其应用于表单。这两个词都有点冗长，我会在这里放一个我认为更容易理解的词，它适用于表单

需要注意的是，我只是在回答您对验证器的需求。这并不意味着这是实现您想要的用户体验的最好或最简单的方法

为应用于表单的自定义验证器替换这两个字段的验证器： createForm:void{ this.submissionForm=this.fb.group { ...

---

姓名：[]，//因为您的字段只有在可见时才必须遵循某些规则，并且它们的可见性状态取决于其他控件的值，所以您必须编写一些自定义验证器。有两种方法可以做到这一点：将自定义验证器直接应用于控件，或将其应用于表单。这两种方法都有点冗长，而且我会在这里放一个我认为更容易理解的，适用于f 奥姆

需要注意的是，我只是在回答您对验证器的需求。这并不意味着这是实现您想要的用户体验的最好或最简单的方法

为应用于表单的自定义验证器替换这两个字段的验证器： createForm:void{ this.submissionForm=this.fb.group { ...

---

名称：[]，//基本调试：console.logObject.EntriessSubmissionForm.controls.map[key，{errors}]=>[key，errors]@AluanHaddad我所有的值都是空的。我仍然不明白为什么会这样？好吧，但至少你知道为什么你的表单是空的invalid@AluanHaddad是的，我现在看到它是无效的。但我不确定为什么即使我填写表格，值也都是空的？很难说，如果不运行它，我现在没有时间。也许你有一些错误，我在您的控制台上？基本调试：console.logObject.entriessubmissionForm.controls.map[key，{errors}]=>[key，errors]@AluanHaddad我所有的值都是空的。我仍然不明白为什么会这样？好吧，但至少你知道为什么你的表单是空的invalid@AluanHaddad是的，我现在看到它是无效的。但我不确定为什么即使我填写表格，值也都是空的？很难说，如果不运行它，我现在没有时间。也许你有一些错误，我在你的控制台上？仅供参考：我不确定你问题中的表单是否是生产表单。如果是，Stackblitz演示中修复了它的一些问题。哇，这非常有用，感谢你包括Stackblitz演示。将验证程序函数放在外部文件中也是一个非常好的主意。我的表单现在工作得非常好。顺便说一句，我也不认为这是一个冗长的解决方案。仅供参考：我不确定您问题中的表单是否是生产表单。如果是，Stackblitz演示中修复了一些问题。哇，这非常有用，感谢您包括Stackblitz演示。将验证程序函数放入外部文件也是一个非常困难的过程好主意。我的表单现在运行得很好。顺便说一句，我也不认为这是一个冗长的解决方案。