代码之家 › 专栏 › 技术社区 › Samir Guiderk

Angularjs 6消息提交成功

angular6

0

Samir Guiderk · 技术社区 · 8 年前

如何在提交时在函数中生成包含“操作成功”的消息?

  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>

2 回复 | 直到 8 年前

1

3

pk_code 7 年前

使用字符串插值({{…}})不会对要显示的HTML提供太多控制,

你可以利用 *NGIF 如果要显示更多内容,请使用下面的简单字符串:

showMsg: boolean = false;

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

然后您可以使用showmsg boolean来显示/隐藏如下的潜水

<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>

在提交时将导致如下结果:

请注意,我正在使用一些引导类进行样式设置。

2

1

firegloves 8 年前

你可以在这个组件中声明一个变量:

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>