Angular 角度反应表单数据更改验证而非外观更改验证

给定一个特定的formGroup及其对应的HTML表单

this.fieldForm=新表单组({
fieldId:new FormControl（空），
fieldName:new FormControl（“，Validators.required），
sourceCreateBy:new FormControl（null），
sourceUpdateBy:new FormControl（null），
}，{validators:FieldFormValidators.invalidFormInput}）//其他一些逻辑

考虑

fieldName

=“劳动力”的场景。在HTML表单中，我编辑输入字段，使值首先为“WORKFORCE_1”，然后返回“WORKFORCE”。formGroup属性已从

pristine=true、dirty=false、toucted=false

更改为

pristine=false、dirty=true、toucted=true

因此，表格是有效的。但事实上，数据没有发生变化。是否有任何内置的FormControl或FormGroup属性或其任何组合可以帮助我禁用“更新”按钮，或者我只能在事实发生后（单击“更新”按钮）进行验证

---

我可以创建一个自定义验证器来处理此验证逻辑吗？

您可以创建一个自定义验证器“isDifferent”，但首先要使用函数重新嵌入创建表单的方法

你用

this.fieldForm=this.getForm(..your object...)

更新：a附件。上面的代码来自我想象中的一个典型的REST。因此，如果我们有一个组件来编辑/创建一个寄存器，我们就有一个路由器，比如

{ path: 'hero/:id',component: HeroDetailComponent },

其中，可能的id值是一个数字或“新”，因此我们可以

url=hero/new  //edit-component to create a new "hero"
url=hero/1    //edit-compoent to edit the hero with "id=1"

我们的组件，有一个表单，使用reactiveForm，考虑到这一点，所以

constructor(private activatedRoute: ActivatedRoute,private service: HeroService) {}
form:FormGroup
status:string //here we store if "new" or "edit" to use for e.g.
              //the button "submit" show a message "create" or "update"
ngOnInit() {
  this.activatedRoute.paramMap.pipe(
    switchMap(params => {
      const id=params.get('id')
      if (id=="new"){
          this.form=this.getForm();  //create a empty form
          this.status="new"
      }
      else{
         //use "+id" to convert to number the "id"
         this.service.getHeroe(+id).subscribe(res=>{
             //here we has the "data of the "hero"
             this.form=this.getForm(res)  //create a form with the data of hero
             this.status="edit"
         })
      }
  );
}

我们的.html在输入中不需要复杂的处理程序，例如，我们的按钮“提交”可以是

{{status==“新建”？“创建”：“更新”}

检查这个：@robert我检查过了。但它同样只处理表面上的变化，比如肮脏、原始、触摸。另一个答案是在

submitForm（）

中处理事后验证。谢谢你的回复。你可以查看下面标记的答案，看看我实际上在寻找什么样的解决方案。再次感谢您我应该将哪些数据传递给

getForm（）

函数？我是否需要在输入上编写自定义事件处理程序来调用

getForm（）

？因为现在我只需要在HTML中设置

formControlName

指令，然后

fieldForm

就会自动更新。@AyushNair，你说得对。“代码”来自更复杂的组件。我在imaginarium组件中添加了一个小示例来更新/创建“英雄”。在本例中，您无需编写自定义事件处理程序。您的解决方案运行良好。多谢各位much@AyushNair，抱歉：：glups:：，我的代码中有一个错误，请参阅更新的getForm函数。因此，您了解需要动态创建具有所有属性的对象

url=hero/new  //edit-component to create a new "hero"
url=hero/1    //edit-compoent to edit the hero with "id=1"

constructor(private activatedRoute: ActivatedRoute,private service: HeroService) {}
form:FormGroup
status:string //here we store if "new" or "edit" to use for e.g.
              //the button "submit" show a message "create" or "update"
ngOnInit() {
  this.activatedRoute.paramMap.pipe(
    switchMap(params => {
      const id=params.get('id')
      if (id=="new"){
          this.form=this.getForm();  //create a empty form
          this.status="new"
      }
      else{
         //use "+id" to convert to number the "id"
         this.service.getHeroe(+id).subscribe(res=>{
             //here we has the "data of the "hero"
             this.form=this.getForm(res)  //create a form with the data of hero
             this.status="edit"
         })
      }
  );
}

<!--see that the button is disabled if the form is invalid
    if it's not invalid you need equal "disabled" to null,
    **not** to false
--->

<button disabled="form.invalid?true:null">
     {{status=="new"?"Create":"Update"}}
</button>