一旦提交了表单组，如何使提交的变量为真，一旦用户更改了表单中的某些值，如何使它为假？

Question

我有一个 FormGroup，一旦用户提交并且表单有一些错误，我将 submitted 变量设置为 true 并显示错误，之后，如果用户对表单进行任何更改，则 submitted 变量应该为 false并隐藏错误。有什么办法可以做到这一点？如果表单有错误并且已提交，我可以将提交的变量更改为 true，但是如果用户在提交后对表单进行任何更改，我如何将提交的变量设置为 false？

Answer 1

我想这对你有帮助

component.html

  <input type="text" class="form-controls inputs" id="planName" formControlName="plan_name" />
            <span class="title" *ngIf="(newPlanForms.plan_name.touched || submitted) && newPlanForms.plan_name.errors?.required">
            Plan name is required
            </span>

component.ts

submitted = false;

newPlanForm = this.fb.group({
plan_name:new FormControl("",[Validators.required]),});

onSubmit(value:any){
this.submitted = true;
....
.....}

Answer 2

在组件的 ngOnInit() 函数中，订阅 FormGroup.

的 valueChanges 属性

这样每次 valueChanges 都有一个新的发射值时，您可以将 submitted 布尔值属性重置为 false。

ngOnInit(): void {
   this.userForm.valueChanges.subscribe(() => {
      this.submitted = false;
   });
}

Answer 3

根据您的描述，提交后显示错误信息。很难用您的方法保持表单的状态。但你可以使用这样的技巧：

  this.userForm.markAsPristine();
  this.userForm.markAsUntouched();

你可以试试别的方法:

您可以从响应式表单中获益，而不是在提交后显示错误，并为表单的每个字段即时显示错误，并且提交按钮只有在 from 有效时才能启用。

N.B : 如果错误消息来自后端，您可以使用 à toast 或 snackbar。

一旦提交了表单组，如何使提交的变量为真，一旦用户更改了表单中的某些值，如何使它为假？

how to make submitted variable to true, once the formgroup is submiteed and make it to false once the user changes some values in the form?

angular

typescript

angular-reactive-forms

formgroups