代码之家 › 专栏 › 技术社区 › 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 6 年前

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

推荐文章

annepic · valueChanges尝试引发对象为null的错误(被动形式)

7 年前

Rajesh Keerthi · 在角度5中,在特定索引处的反应形式数组中插入值

7 年前

Yashdeep Sharma · 验证全部或无角度4

7 年前

Idris.AH · 包含复选框的角度2/5条件验证

7 年前

Oleksandr Oleksiv · 如何从窗体组中禁用的窗体控件中获取值?

7 年前

JSON · 如何将参数传递给异步验证器以进行被动角度控制?

7 年前

Shahriar Miraj · 在Angular4中,每当我添加表单标记时,没有为ControlContainer错误提供程序

7 年前

JordanBarber · 角度5反应形式-传递FormArray的复选框Id

7 年前

Stephen Jawahar · 角材料表中按钮的实现

7 年前

user3875919 · 角度反应式表单自定义验证器在表单重置后不工作

7 年前