Angular 2表单提交之后,并且显示错误的信息?

图片描述

form.html

<!--忘记密码-->
<div class="container">
    <div class="row">
        <div class="col-lg-6 col-lg-offset-3">
            <h4 class="_form-title">忘记密码</h4>
            <form class="form-horizontal _form" role="form" onsubmit="return checkForm()">
                <p class="form-tip">请在此输入您的注册邮箱,您将通过电子邮件收到一个重置密码的链接。</p>
                <div class="form-group">
                    <div class="col-sm-8 col-xs-12">
                        <p class="form-error show"></p>
                        <span ng-show="myForm.$invalid">{{getErrorMessage(myForm.$error)}}</span>
                        <input type="text" class="form-control" id="Email" #email placeholder="电子邮箱" >
                    </div>
                </div>
                <div class="form-group form-btn">
                    <div class="col-xs-3">
                        <a class="form-back" href="javascript:history.back()">
                            <<返回登录</a>
                    </div>
                    <div class="col-xs-5 text-right">
                        <button  type="submit" class="btn btn-submit" (click)="sendEmail(email.value)" style="width: 130px;">提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

form.ts

@Component({
    moduleId: module.id,
    selector: 'my-password',
    templateUrl: 'password.html',
    providers:[ForService]
})

export class PasswordComponent {
    constructor(
        private ForService:ForService,
        private route: ActivatedRoute,
        private router: Router,
    ) {}
    public  name1:string='';
    public  name2:string='';
    public sgin='';
    public errMessage:string;
    sendEmail (email:string) {
        if (!email) { return; }
        this.ForService.finder(email)
            .subscribe(
                res => {this.sgin=res['status']; let stu = this.sgin ;if(stu=="00"){ this.router.navigate(['/linkReset',email]);}},
                error =>  this.errMessage = <any>error);
         console.log(this.sgin);

    }
}

请求大神,怎么写法?
提交之后,并显示“该邮箱并未注册”?

阅读 4.1k
2 个回答

Angular是以数据来驱动DOM的,所以当 http 请求返回邮箱未注册时,你可以加:

this.sgin=res['status'];
let stu = this.sgin;
// 未注册
if(stu === 'xx') {
    this.errMessage = '该邮箱未注册';
    return;
}
if(stu=="00") { this.router.navigate(['/linkReset',email]);}

模板:

<p class="form-tip">请在此输入您的注册邮箱,您将通过电子邮件收到一个重置密码的链接。</p>
<p *ngIf="errMessage">{{errMessage}}</p>
推荐问题