Question

我们一直在输入文本框，因此会触发电子邮件验证。我希望当用户从文本框中聚焦时会触发此验证

以下是我的代码：

<input class="form-control" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"
 name="Email" type="email" [(ngModel)]="model.Email" #Email="ngModel" required>

<div class="red" *ngIf="Email.errors && (Email.dirty || Email.touched)">
     <div [hidden]="!Email.errors.pattern">
         Please enter a valid email.
     </div>
</div>

请建议我如何实现这一目标。提前谢谢。

Answer 1

从6+版本开始，可以通过> [{'document_tone': {'tones': [{'score': 0.551743, 'tone_id': 'analytical', 'tone_name': 'Analytical'}]}, 'sentences_tone': [{'sentence_id': 0, 'text': '@jozee25 race is the basis on which quotas are implemented.', 'tones': []}, {'sentence_id': 1, 'text': 'helloooooo', 'tones': []}]}, {'document_tone': {'tones': []}}, {'document_tone': {'tones': [{'score': 0.802429, 'tone_id': 'analytical', 'tone_name': 'Analytical'}, {'score': 0.60167, 'tone_id': 'confident', 'tone_name': 'Confident'}]}, 'sentences_tone': [{'sentence_id': 0, 'text': '@growawaysa @cricketandre i have the answer on top yard from dpw:it is not currently "surplus to govt requirements".it is still being used for garaging until a new facility is ready in maitland.the', 'tones': [{'score': 0.631014, 'tone_id': 'analytical', 'tone_name': 'Analytical'}]}, {'sentence_id': 1, 'text': 'cost of the housing options will of course depend on prospects for cross subsidisation.', 'tones': [{'score': 0.589295, 'tone_id': 'analytical', 'tone_name': 'Analytical'}, {'score': 0.509368, 'tone_id': 'confident', 'tone_name': 'Confident'}]}]}, {'document_tone': {'tones': [{'score': 0.58393, 'tone_id': 'tentative', 'tone_name': 'Tentative'}, {'score': 0.641954, 'tone_id': 'analytical', 'tone_name': 'Analytical'}]}}, {'document_tone': {'tones': [{'score': 0.817073, 'tone_id': 'joy', 'tone_name': 'Joy'}, {'score': 0.920556, 'tone_id': 'analytical', 'tone_name': 'Analytical'}, {'score': 0.808202, 'tone_id': 'tentative', 'tone_name': 'Tentative'}]}, 'sentences_tone': [{'sentence_id': 0, 'text': 'thanks @khayadlangaand colleagues for the fascinating tour yesterday.really', 'tones': [{'score': 0.771305, 'tone_id': 'joy', 'tone_name': 'Joy'}, {'score': 0.724236, 'tone_id': 'analytical', 'tone_name': 'Analytical'}]}, {'sentence_id': 1, 'text': 'eyeopening and i learnt a lot.', 'tones': [{'score': 0.572756, 'tone_id': 'joy', 'tone_name': 'Joy'}, {'score': 0.842108, 'tone_id': 'analytical', 'tone_name': 'Analytical'}, {'score': 0.75152, 'tone_id': 'tentative', 'tone_name': 'Tentative'}]}]},属性设置字段验证。

使用模板驱动的表单：

result =[]
for i in helen['Tweets']:
   tone_analysis = tone_analyzer.tone(
       {'text': i},
       'application/json'
   ).get_result()
   result.append(tone_analysis)

具有反应形式：

updateOn

如果设置了验证器，则：

<input [(ngModel)]="name" [ngModelOptions]="{updateOn: 'blur'}">

来源：https://angular.io/guide/form-validation#note-on-performance

Answer 2

这将在版本5中实现，该版本尚未发布。

请参阅：https://github.com/angular/angular/issues/7113

与此同时：

<input class="form-control" formControlName="userName" placeholder="User Name" type="text" (blur)="checkUserExists()"/>
<div class="alert-danger" *ngIf="userName.invalid && userName.touched">
  <div *ngIf="userName.hasError('required')">User Name is required</div>
  <div *ngIf="userName.hasError('userExists')">{{userName.errors.userExists}}</div>
</div>

checkUserExists() {
    if (this.userName.value) {
      this.regServ.userNameExists(this.userName.value)
      .subscribe((exists) => {
        if (exists) {
          this.userName.setErrors({ userExists: `User Name "${this.userName.value}" already exists` });
        }
      });
    }
  }

Answer 3

如果您使用的是Angular，您可以通过这种方式调用

<input type="text" id="sometext" (focusout)="myFunction()">

否则，您可以使用

<input type="text" id="sometext" onfocusout="myFunction()">

从角度输入聚焦时的火灾验证？

3 个答案: