代码之家 › 专栏 › 技术社区 › Muhammed Albarmavi

当窗体被禁用时,反应窗体有效属性返回false

angular-reactive-forms typescript angular

Muhammed Albarmavi · 技术社区 · 6 年前

我有这个简单的表单,用于创建和更新案例,因此对于创建案例,用户将输入数据并基于validatorsI获得 form.valid (对,错)。在update case中,我只是从api获取数据,并将该值设置为表单,然后禁用表单;

this.form = fb.group({
  name: ['', Validators.required],
  lastName: ['', Validators.required],
  address: [''],
});

所以当我禁用表单时,有效值总是 false ;

 ngOnInit() {
    this.form.patchValue({
      name: 'name',
      lastName: 'Last Name'
    });

    this.form.disable();
  }

3 回复 | 直到 6 年前

JB Nizet 6 年前

这是正确的文件上说:

控件在其状态有效时有效。

身份证明文件上写着:

控件的验证状态有四种可能的验证状态值:

有效:此控件已通过所有验证检查。

无效:此控件至少未通过一次验证检查。

挂起:此控件正在进行验证检查。

禁用:此控件不受验证检查的限制。

您的表单已禁用,因此无效。

Muhammed Albarmavi 6 年前

如果表单被禁用,Valid将返回false,因此我找到了解决此问题的两种方法

检查实例 valid 属性直接生成用于检查有效性的函数

 isFormValid() : boolean { 
    return this.form.disabled ? true : this.form.valid
  }

模板

<button [disabled]="!isFormValid()" (click)="update()">Update</button>

不创建isFormValid函数的另一种方法

<button [disabled]="!form.valid && form.disabled === false" (click)="update()">Update</button>

Eric 5 年前

如果不是所有的表单字段都被禁用,那么此时,在这种情况下,使用反应式表单的最佳解决方法是将这些字段标记为只读不完全一样,但这样你可以有一个一贯的行为。

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

1 年前

Kael · 在html表格中显示关系api数据-角度

2 年前