Question

在我的角度2应用程序中，我有一个子组件，它是一个带电子邮件的模式，确认电子邮件字段，发送和取消按钮。当我输入一些无效的电子邮件时，让我们在电子邮件字段中说亨利并确认电子邮件字段，服务电话并不是因为它是一个无效的输入。但是当我尝试给出一些有效的电子邮件ID时，我希望服务调用发生，即子组件应该向父母发出数据以进行服务调用。这是一个带有发送和的小模式单击发送按钮发送电子邮件时，我正在拨打服务电话的取消按钮。我希望只有在输入有效的电子邮件时才会发生服务呼叫。我没有在这里使用任何表单组来检查电子邮件是否有效。我只使用Javascript regEx来验证电子邮件表达。

我的HTML -

 <md-input placeholder="Email" [(ngModel)]="email" name=""></md-input>
 <md-input placeholder="Confirm Email" [(ngModel)]="confirmEmail"name="">
</md-input>
<button (click)="sendEmail()">SEND</button>
<button>CANCEL</button>

在我的.ts -

export class appComponent{
@Input () emailData: {email:string,confirmEmail:string};
}

    validateEmail(email) {
            var re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
            return re.test(email);
        }        
        private sendEmail() {                
            if(this.validateEmail(this.emailData)){        
                this.onEmailSend.emit(this.emailData);
            }
        }

当我调试时，它会在输入无效的电子邮件时停止服务呼叫，但是对于有效的电子邮件地址，服务调用没有发生，因此没有发送电子邮件。有人告诉我我哪里出错。

Answer 1

请为您的组件定义输出参数，如下所示：

@Output() onEmailSend: EventEmitter<any> = new EventEmitter<any>();

之后

你可以发出事件：

this.onEmailSend.emit(this.emailData);

然后在你的父组件中你应该添加：

.
.
.
    onEmailSend(emailData)
    {
        console.log(emailData);
        // something you want to send an email
    }
.
.
.

Answer 2

你可以试试这个：

<div class="alert-email">
        <label>Email</label>
            <input
                id="email"
                type="text"                
                #email="ngModel"
                [(ngModel)]="model.email"
                required
                pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">

            <div class="md-errors-spacer" [hidden]="email.valid ||    email.untouched">
            <div  *ngIf="email.errors && email.errors.required">
                Email is required
            </div>
            <div  *ngIf="email.errors && email.errors.pattern">
                Email is invalid
            </div>
        </div>
    </div>

并且Angular 2还有一个内置的＆＃34;电子邮件＆＃34;可以在输入中添加的验证标记

<input type="email" id="contact-email" email>

Angular2 - 仅在输入有效的电子邮件ID时允许服务呼叫

2 个答案: