Question

我是 Angular 的新手。我有一个登录页面和 api链接。我希望用户凭据匹配与API中的凭据

我有一张表格：

<form  class="content l1">
            <!-- login-detail -->
            <div class="login-detail l1">
                <h3>Log in</h3>
                <p>Log in using your registered account</p>
                <input type="text" #name class="box-align" placeholder="User name">
                <input type="password" #password class="box-align" placeholder="Password">
                <input type="checkbox" name="remember" class="remember"> <label for="checkbox">Remember Me</label>
                 <button class="btn-sub" value="Log in" (click)="CheckLogin(name.value,password.value)">Log in</button>
            </div>
            <!-- login-detail -->
        </form>

我已阅读帖子并了解我需要 Http和Obversable 方法来获取数据和匹配，是吗？

请指导，以便我以正确的方式启动API集成。

Answer 1

登录时我更喜欢角形。使用表单然后通过id绑定元素是什么意义。

  <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
            <!-- login-detail -->
            <div class="login-detail l1">
                <h3>Log in</h3>
                <p>Log in using your registered account</p>
                <input type="text"class="box-align" placeholder="User name" name="username" ngModel>
                <input type="password" class="box-align" placeholder="Password" name="password" ngModel>
                <input type="checkbox" name="remember" class="remember">
 <label for="checkbox" name="remember" ngModel>Remember Me</label>
                 <button class="btn-sub" value="Log in" type="submit")">Log in</button>
            </div>
            <!-- login-detail -->
        </form>

然后在组件上

public onSubmit(options) {
        this.loginService.passwordFlow(options.username, options.password, ....);
      }

LoginService是一种标准的角度服务，可以处理你的http请求具有类似于

的功能

    public passwordFlow(username: string, password: string, remember: string) {
    this.httpClient.post(`http://blahblah/auth/login`, {
      remember,
      username,
      password
    }).toPromise().then((loginResponse}) => {
      // do something with response
      this.router.navigate(['/somewhere']);
    }, (error) => {
      // do something with error
    });
  }

如何匹配Angular中API的登录凭据

1 个答案: