在Angular 8中提交成功后如何清除验证错误?

时间:2020-06-11 11:41:22

标签: html angular

enter image description here

来自我的浏览器的图片在上方,请看看! 我试图提交一个空白表格,然后提交了成功验证,但是它仍然向我显示错误?

如何解决此错误?

这是我的component.ts代码:

export class ContactComponent implements OnInit {
  users = [];
  newUser: any;
  error = "";
  sent = false;

  constructor(private _httpService: HttpService, private _router: Router) {}

  ngOnInit() {
    this.getAllUsers();
    this.newUser = { name: "", email: "", message: "" };
  }

  getAllUsers() {
    let observable = this._httpService.getUsers();
    observable.subscribe((data) => {
      this.users = data["data"];
    });
  }

  sendMessage() {
    let observable = this._httpService.createUser(this.newUser);
    observable.subscribe((data: any) => {
      if (data.error) {
        this.error = data.error.errors;
        this._router.navigate(["/contact"]);
      } else {
        this.getAllUsers();
        this.sent = true;
        this._router.navigate(["/contact"]);
      }
    });
  }

这是我的表单html代码:

<form #myForm="ngForm">
  <div class="row">
    <div class="form-group col-md-6">
      <label for="name">Name</label>
      <input type="text" name="name" [(ngModel)]="newUser.name" class="form-control">
      <div class="err" *ngIf="error.name">
        <p class="text-danger">{{error.name.properties.message}}</p>
      </div>
    </div>
    <div class="form-group col-md-6">
      <label for="email">Email</label>
      <input type="email" name="email" [(ngModel)]="newUser.email" class="form-control">
      <div class="err" *ngIf="error.email">
        <p class="text-danger">{{error.email.properties.message}}</p>
      </div>
    </div>
  </div>
  <div class="form-group">
    <label for="message">Message</label>
    <textarea class="form-control" name="message" [(ngModel)]="newUser.message" rows="9"></textarea>
    <div class="err" *ngIf="error.message">
      <p class="text-danger">{{error.message.properties.message}}</p>
    </div>
  </div>
  <div class="form-group text-center">
    <button type="submit" class="btn btn-outline-primary" (click)="sendMessage(); myForm.reset()">Submit</button>
  </div>
</form>

谢谢!我真的很感谢每个答案

1 个答案:

答案 0 :(得分:0)

我发现我只需要更改this.error = "";

相关问题