Question

我创建了一个反应式表单，以将用户和验证者一起分配给特定角色tp提交按钮处于活动状态的所有字段。现在我想在从angular的下拉列表中选择用户类型时禁用一些字段

我提供了一些代码供您参考

这是.ts文件代码：

this.form = this._formBuilder.group({
          className: ['', ValidationService.requiredField],
          classTeacherName: ['', ValidationService.requiredField],
          userStatus: ['', ValidationService.requiredField],
          academicYear: ['', ValidationService.requiredField],
          userType: ['', ValidationService.requiredField],
          sectionName: ['', ValidationService.requiredField],
          studentName: ['', ValidationService.requiredField]
        });

有4个用户，他们是：

users : string[] = ['student', 'teacher', 'parent', 'admin'];

预期结果是，当选择教师时，应该禁用classTeacherName的验证器。

Answer 1

您可以通过订阅表单更新，然后更改验证器来实现自己的条件验证逻辑。

setUserCategoryValidators() {
    const classTeacherName = this.form.get('classTeacherName');

    this.form.get('userType').valueChanges
      .subscribe(userType=> {

        if (userType === 'teacher') {
          classTeacherName.setValidators(null);
        }
        else (userType === 'employee') {
          classTeacherName.setValidators([Validators.required]);
        }

        classTeacherName.updateValueAndValidity();
      });
  }

有关此实现的更多信息，请参见here。

如何有条件地验证反应角形式的元素

1 个答案: