启用或禁用字段。反应形式 Angular

Question

当密码字段有效时，我尝试使用 [angular version:13] 以反应形式启用和禁用重新密码字段。

我用我不喜欢的技术解决了它。

[HTML]

 <input formControlName="password" (change)="enableOrDisablePassword()" type="text"    >

组件

enableOrDisablePassword(){                                                                                                    
    setTimeout(()=>{                                                                                                        
    (this.form.get('password')?.valid) ?                                                                              
    this.form.get('repassword')?.enable():                                                                        
    this.form.get('repassword')?.disable();                                                                       
    },2000);                                                                                                                
    }

setTimeout() 是因为当您尝试检查是否有效时....FormControl return 以前的状态而不是新的...所以我稍等一下它更新。

有些文章建议在 FormGroup 级别使用验证器函数，因为您正在与同一块中的两个字段进行交互。无论如何，我尝试了很多东西，问题总是一样的……return 值始终是以前的状态，而不是新的。我得等一下。

Answer 1

为什么不简单地做

<input formControlName="repassword" [disabled]="isPasswordInvalid()" type="text">

get isPasswordInvalid(): boolean {
  return this.form.get('password')?.valid;
}

Answer 2

我会按照这些思路使用一些东西：

export class AppComponent {
  // just a simple form definition with some basic validation I used
  // to test this solution with
  form = new FormGroup({
    password: new FormControl(undefined, Validators.pattern('^[a-zA-Z0-9]{4}$')),
    repassword: new FormControl(),
  });

  ngOnInit() {
    const passCtrl = this.form.controls['password'];
    const repassCtrl = this.form.controls['repassword'];
    passCtrl.valueChanges.subscribe(x => {
      passCtrl.valid ? repassCtrl.enable() : repassCtrl.disable();
    });
  }
}

@E。 Maggini 的答案有效（如果您更正 getter/method 调用位），但由于 [disabled] 表达式在每个更改检测周期都会被评估，如果该技术在页面上应用得太频繁，可能会影响性能。另外，不是 100% 确定这一点，但我相信 Angular 不喜欢当你像那样绑定 [disabled] 同时使用 Reactive Forms 时。

//更新是的，Angular 不喜欢这种方法。在控制台上：

It looks like you're using the disabled attribute with a reactive form directive.
If you set disabled to true when you set up this control in your component class,
the disabled attribute will actually be set in the DOM for you. We recommend
using this approach to avoid 'changed after checked' errors.

启用或禁用字段。反应形式 Angular

enable or disable field. Reactive Form Angular

forms

validation

angular