Angular 7和RxWebValidators库添加Conditional validators正在将添加按钮设置为禁用

我有3个反应式表单控件：

第一个是u_id表单控件名称，它应该采用以下形式：ADD-dddddd，并且该验证工作正常； 第二个是政府颁发的身份证 Rge第三个是此政府ID的编号 我正在使用RxWebValidators库来生成条件验证器

如果用户没有输入自己的u_id，则保存按钮将被禁用，至少在用户添加政府id类型的passport或personal id之前，当然，还应添加此id的编号

如果用户确实输入了u_id，他可以跳过gov id部分，按钮将被禁用

以下是脚本：

import { Component, OnInit } from '@angular/core';
import { RxwebValidators } from "@rxweb/reactive-form-validators"
import { FormBuilder, FormGroup, Validators, FormControl } from "@angular/forms"
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular';
  userForm: FormGroup

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.userForm = this.formBuilder.group({
      'u_id': new FormControl('', [Validators.minLength(12), RxwebValidators.required({ conditionalExpression: (x) => x.gov_id_type === '' && x.gov_id_number === '' }), RxwebValidators.pattern({ pattern: { 'unid': RegExp('^[0-9A-Z]{3}(-)[0-9]{2}(C)[0-9]{5}$') }, conditionalExpression: (x) => x.u_id !== '' })]),

      'gov_id_type': new FormControl('', RxwebValidators.required({ conditionalExpression: (x) => x.u_id === '' })),

      'gov_id_number': new FormControl('', RxwebValidators.required({ conditionalExpression: (x) => x.gov_id_type !== '' }))
    })
  }

}

以及html脚本：

<div>
    <div class="container">
        <main class="col-12">
            <h3 class="bd-title" id="content">Conditional Required Validator
            </h3>
            <br>
<form  [formGroup]="userForm">
  <div class="form-group">
    <input type="text" formControlName="u_id" placeholder="UID" class="form-control"  />
</div>
<div class="form-group">
<select id="gov_id_type" formControlName="gov_id_type" placeholder="Gov. ID Type" class="form-control">
  <option value="passport">PassPort</option>
  <option value="personal_id">Personal ID</option>
</select>
        <input matInput id="gov_id_number" formControlName="gov_id_number" placeholder="Gov. ID Number" class="form-control"/>

</div>
<button matButton color="warn" [disabled]="!userForm.valid">
        Save Data
</button>
</form></main></div>

还有一个检查

按钮始终处于禁用状态，并且验证程序不工作

stackblitz工作示例中存在formcontrol名称命名约定问题。它必须是u_id，并且您在component.ts文件中被称为un_id

以下关于ngOnInit的更新代码是

ngOnInit() {
this.userForm = this.formBuilder.group({
  'u_id': new FormControl('', [RxwebValidators.required({ conditionalExpression: (x) => x.gov_id_type === '' && x.gov_id_number === '' }), 
  RxwebValidators.pattern({ pattern: { 'unid': RegExp('^[0-9A-Z]{3}(-)[0-9]{2}(C)[0-9]{5}$') }, conditionalExpression: (x) => x.u_id !== '' })]),

  'gov_id_type': new FormControl('', RxwebValidators.required({ conditionalExpression: (x) => x.u_id === '' })),

  'gov_id_number': new FormControl('', RxwebValidators.required({ conditionalExpression: (x) => x.gov_id_type !== '' }))
})
 }

}

请使用最新版本的@rxweb/reactive form validators is 1.3.3

请查看下面的链接以了解工作解决方案。

---

让我检查一下并尽快向您提供最新信息。@Ajayokha好的，等待您的回答。@Ajayokha有什么消息吗？请检查此url并确认它是否符合预期？在那之后，我将与你分享我所做的细节colleague@IshaniShah我会和你分享细节。在出现任何混乱之后，请让我知道。它在小提琴中工作，但在我的应用程序中不会工作，当我在u_id内单击时，它将变为红色，并且即使我添加了带有数字的gov id，按钮仍将保持禁用状态。您是否安装了@rxweb/反应式表单验证程序的最新版本？我是在2天前安装的，所以我猜这是最新版本。您是否可以签入package.json其@rxweb/反应式表单验证程序的版本号。请告知其版本号@rxweb/reactive form validators:^1.3.3，