是否可以对数组（不是表单）的 return 值使用验证器？

Question

我创建了一个从给定文本中提取电子邮件的函数。现在我想用现有的验证器验证提取的电子邮件。但是我不太确定在字符串数组的 return 值上是否可行。

我用来从文本中提取电子邮件的函数：

//Variables
emailText: string;
emailArray: string[];

getEmailAddressFromText():string [] {
    let regexToExtractEmails= /(?:[a-z0-9+!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/gi;
     return this.emailArray= this.emailText.match(regexToExtractEmails);
  
}

HTML-文本区代码及显示结果

 <mat-form-field appearance="outline">
                                 <textarea class="email-text-input"
                                           matInput
                                           placeholder="placeholder="Add E-Mail""
                                           [ngModelOptions]="{standalone: true}"
                                           [(ngModel)]="emailText"
                                           (keyup.enter)="getEmailAddressFromText()"
                                           (keyup.enter)="clearInput()"
                                 > </textarea>

                            </mat-form-field>

                                <ul *ngFor="let email of emailArray">
                                    <ul >Email: {{email}} </ul>
                                </ul>

我想知道是否可以在未定义为表单字段的字符串数组的 return 值上使用现有验证器。

如何做到这一点或有更好的方法吗？

提前谢谢大家！

Answer 1

看你对正则表达式的掌握程度。我可能会建议使用纯管道来检查每个电子邮件的有效性。如果无效颜色为红色，如果有效颜色为绿色。

<ul *ngFor="let email of emailArray">
  <li
    [ngClass]="{
      'text-red': !(email | validEmail),
      'text-green': (email | validEmail)
    }"
  >
    Email: {{ email }}
  </li>
</ul>

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

  emailText = 'test@.com, gibberih@hotmail.com, 123@123.com';
emailArray: RegExpMatchArray;

  constructor() {}

  ngOnInit(): void {
    this.getEmailAddressFromText();
  }

  getEmailAddressFromText() {
    let regexToExtractEmails =
      /(?:[a-z0-9+!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/gi;
    this.emailArray = this.emailText.match(regexToExtractEmails);
    console.log(this.emailArray)
  }
}

@Pipe({name: 'validEmail'})
export class ValidEmailPipe implements PipeTransform {
  transform(email: string): boolean {
    const EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;
    console.log('Is email valid: ', EMAIL_REGEXP.test(email))
    return EMAIL_REGEXP.test(email)
  }
}

工作示例：https://stackblitz.com/edit/angular-reactive-forms-12-e4dwh1?file=src%2Fapp%2Fapp.component.html

是否可以对数组（不是表单）的 return 值使用验证器？

Is it possible to use validators on return values of array (not form)?

arrays

validation

angular