Question

我有<mat-select required formControlName="registrationType">

如果我选择未注册，则将禁用两个输入字段，否则将启用它。为此，我使用了

const registrationType = this.practiceForm.get('registrationType')
    registrationType.valueChanges.subscribe((value) => {
      if(value === 'Unregistered'){
            this.form.controls['registrationDate'].disable()
            this.form.controls['registrationNumber'].disable()
          }else if(value === 'registered') {
            this.form.controls['registrationDate'].enable()
            this.form.controls['registrationDate'].enable()
          }
    })

选择未注册时，两个输入字段将按预期禁用，但是一旦单击“保存”，将出现以下错误：Must supply a value for form control with name: 'registrationDate'

formGroup

registrationType: new FormControl(null, Validators.required),
registrationDate: new FormControl(null, Validators.required),
registrationNumber: new FormControl(null, Validators.required),

我需要帮助解决此问题。谢谢

Answer 1

您的验证要求您在日期中输入一个required值。

如果您禁用字段，则form.value不包含禁用的字段。

这表示您的表单无效。

为避免这种情况，请删除验证器以及值：

 if(value === 'Unregistered'){
   this.form.controls['registrationDate'].disable()
   this.form.controls['registrationNumber'].disable()
   this.form.controls['registrationDate'].setValidators([])
   this.form.controls['registrationNumber'].setValidators([])
 } else if(value === 'registered') {
   this.form.controls['registrationDate'].enable()
   this.form.controls['registrationDate'].enable()
   this.form.controls['registrationDate'].setValidators([Validators.required])
   this.form.controls['registrationNumber'].setValidators([Validators.required])
 }

Answer 2

您可以在代码中禁用验证器：

this.form.controls[""].validator = null;

或者您可以在表单上使用禁用的属性：

<input [disabled]="some_calculated_property">

应该通过禁用的角度来识别，因为如果您操纵低谷代码（例如订阅输入），则不会触发标准事件。

必须为formcontrol提供值

2 个答案: