angularjs 6 条消息提交成功

Question

如何在提交时在我的函数中创建可以包含 "operation successfully" 的消息？

  onSubmit() {
    this.userService.createUser(this.addForm.value)
      .subscribe( data => {
        this.router.navigate(['list-user']);
      });
  }

我希望将我的空段落附加到我的 html 内容中。

<div class="col-md-6">
  <form [formGroup]="addForm" (ngSubmit)="onSubmit()">

    <p class="msg_success"></p>

    <button class="btn btn-success">Add user</button>
  </form>
</div>

Answer 1

您可以像这样在组件中声明一个变量：

msg: string = null;

onSubmit() {
    this.userService.createUser(this.addForm.value)
      .subscribe( data => {
        this.router.navigate(['list-user']);
        this.msg = 'success';
      });
  }

然后你可以像这样将 msg 变量绑定到你的模板中：

<div class="col-md-6">
  <form [formGroup]="addForm" (ngSubmit)="onSubmit()">

    <p class="msg_success">{{ msg }}</p>

    <button class="btn btn-success">Add user</button>
  </form>
</div>

Answer 2

使用字符串插值 ({{...}}) 不会让您对要显示的 html 有太多控制，

你可以利用 *ngIf 如果想显示更多内容而不是像下面这样的简单字符串:

showMsg: boolean = false;

onSubmit() {
    this.userService.createUser(this.addForm.value)
      .subscribe( data => {
        this.router.navigate(['list-user']);
        this.showMsg= true;
      });
  }

然后你可以使用 showMsg 布尔值来 show/hide 如下所示

<div class="col-md-6">
  <form [formGroup]="addForm" (ngSubmit)="onSubmit()">

   <div class="row"  *ngIf="showMsg">
        <div class="col-xs-12">
          <p class="alert alert-success">
              <strong>Registration Success!</strong> Please click here to login!.

          </p>
        </div>
      </div>

    <button class="btn btn-success">Add user</button>
  </form>
</div>

这将在提交时产生如下内容：

请注意，我使用了一些 bootstrap 类的样式。

angularjs 6 条消息提交成功

angularjs 6 message success on submit

angular6