Angular 中的 10 位手机号码验证

在本节中，我们将学习如何验证一个十位手机号码。我们将使用 Angular 来做到这一点。在下面的例子中，我们将使用 Angular 响应式表单来执行手机号码的验证。 我们可以在 Angular 应用程序的各种版本中执行它，例如 Angular 6、7、8、9、10 和 11。

在下面的例子中，我们将使用 Angular 应用程序和响应式表单来验证十位手机号码。 响应式表单将提供仅接受数字的功能。它不会接受任何数字，只会接受 10 位手机号码。 电话号码字段将不接受任何特殊字符或字母，因为它们被阻止了。 特殊字符可以是逗号、括号、星号、百分比、空格等。它不允许复制粘贴选项。

不允许使用加号 (+) 符号，因为如果我们在下拉列表中输入我们的国家，它将单独添加该国家代码。 如果用户输入的号码不正确，它将显示警告消息“请输入 10 位手机号码。” 如果用户输入的号码正确，它将允许我们点击“提交”按钮，并且不会显示任何警告消息。

为了验证十位数字，我们必须使用一些代码，如下所述

示例

src/app/app.component.html

src/app/app.component.ts

现在我们的上述代码已经准备就绪，可以运行了。运行后，将生成以下输出：