Angular 触摸角形时隐藏消息

我用的是Angular 6，我有以下的形式

 <form  (ngSubmit)="onFormSubmit(myForm)" #myForm="ngForm">    
   first name <input type="text" autofocus id="firstname" required [(ngModel)]="firstname" name="firstname" #firstnameValidityMsg="ngModel"  >
   <div *ngIf="firstnameValidityMsg.invalid && (firstnameValidityMsg.dirty || firstnameValidityMsg.touched)" >
       <div *ngIf="firstnameValidityMsg.errors.required"> first name is required </div>
    </div>    
   <button type="submit" [disabled]="!myForm.form.valid">Submit</button>    
   <div *ngIf="formSuccess && myForm.touched && myForm.dirty"> {{formSuccessMessage}} </div>      
</form>

当页面加载时，我会得到一些数据来填充表单。对于表单提交，我更改

formSuccessMessage

和

accountsuccess

以反映成功并在表单中显示消息

问题

我想在点击提交后显示成功消息，然后在触摸表单后隐藏成功消息。这将继续为任何未来的提交或触摸

{{formsuccessessage}}

无法执行此操作。它确实在第一次显示消息，就是这样。当触摸表单时，它从不隐藏消息，以便在将来提交时重新显示。我猜，由于表单中始终包含数据，并且从不重置，因此这将不起作用。我找不到任何其他组合使它工作。在某些情况下，在第一次提交后，所有状态保持不变，您可以使用进行检查

  <p>myForm.dirty - {{myForm.dirty}}</p>
  <p>myForm.pristine - {{myForm.pristine}}</p>
  <p>myForm.untouched - {{myForm.untouched}}</p>
  <p>myForm.touched - {{myForm.touched}}</p>
  <p>formSuccess - {{formSuccess}}</p>

myForm.dirty-{{myForm.dirty}

myForm.pristine-{{myForm.pristine}

myForm.untouched-{{myForm.untouched}

myForm.toucted-{{myForm.toucted}

formSuccess-{{formSuccess}

如何解决这个问题

---

谢谢

我需要一个布尔值，例如

isSubmitted

，然后订阅

NgForm

指令的

valueChanges

，然后在值发生变化时查找，将

isSubmitted

标志设置为false。当然，在提交表单时，将标志切换到

true

。。。导入

NgForm

和

ViewChild

以引用表单。您需要在

AfterViewInit

中设置

valueChanges

，因为此时DOM元素可用

@ViewChild（'myForm'）myF:NgForm；
ngAfterViewInit（）{
this.myF.valueChanges.subscribe（（数据）=>{
this.formSuccessMessage=''；
this.isSubmitted=false；
});
}

然后在你的模板中你会

{{formSuccessMessage}

---

如前所述，在提交表单时，将

isSubmitted

切换为true。

请添加您的代码。我在那里没有帐户。jsfiddle可以吗？可以添加到jsfiddle。但你不需要登录stackblitz。@Arash，你好。可以吗？不，请生成一个带有源的链接。我需要查看您的源代码来调试它。太棒了，很高兴听到！：）祝你有一个愉快的一天和快乐的编码！

  <p>myForm.dirty - {{myForm.dirty}}</p>
  <p>myForm.pristine - {{myForm.pristine}}</p>
  <p>myForm.untouched - {{myForm.untouched}}</p>
  <p>myForm.touched - {{myForm.touched}}</p>
  <p>formSuccess - {{formSuccess}}</p>