Question

我有此代码：

<form #userForm="ngForm" (ngSubmit)="save(userForm)">
    <input type="email" #contactEmail="ngModel" email minlength="2"  [(ngModel)]="contactInformation.email" class="form-control" id="contactEmail" name="contactEmail" aria-describedby="emailHelp" placeholder="Enter email">
    <div *ngIf="contactEmail.invalid">
      Please input a valid email
    </div>
    <button type="submit" class="btn btn-primary">Send</button>
</form>

加载此代码后，contactEmail设置为有效且原始，并且不显示错误消息。我要满足以下两个条件：

如果在表单中加载了电子邮件的“”值，则应显示错误。
如果该表单已加载“ valid@email.com”作为电子邮件，则不应显示该错误。

我该怎么做？

编辑：我已经得到2个答案，没有一个女巫像预期的那样工作，这是一个演示示例的stackBlitz：

https://stackblitz.com/edit/angular-wwttsr

预期的行为是在加载时显示错误消息，并且已填写占位符。

Answer 1

只需尝试在您的ts中添加contactInformation.email = ""-这将使您的值成为空字符串-而如果值不是null，则将进行表单验证，请不要绑定null到初始加载时的值

希望这可以解决您的问题-编码愉快！！

更新

我对您的*ngIf条件做了一些更改，将您的占位符保留在input文本上

<form #f="ngForm">
    <input type="text" minlength="10" [(ngModel)]="coumnNameModel" name="coumnName" #coumnName="ngModel" email placeholder="please write">
</form>
<small *ngIf="coumnNameModel != null && coumnNameModel.length <= 10">
    Field needs 10 characters
</small>
<small *ngIf="coumnName.invalid && coumnNameModel.length > 10">
    Enter a valid email 
</small>
<button (click)="setRequired()">Set field as required</button>

将coumnNameModel声明为coumnNameModel = ""只是空字符串，并读取字符串的长度以显示错误消息-我添加了几对验证，用于检查初始加载以及输入是否为valid

请检查并让我知道它是否无效-这会使您的占位符在初始加载时完好无损

希望这能奏效，我已经检查了您的来源表格

Answer 2

原来，我的代码有一个非常微妙的错误。不需要设置电子邮件和最小长度验证。因此，仅需设置即可解决所有问题。

<form #userForm="ngForm" (ngSubmit)="save(userForm)">
    <input type="email" #contactEmail="ngModel" email minlength="2" required [(ngModel)]="contactInformation.email" class="form-control" id="contactEmail" name="contactEmail" aria-describedby="emailHelp" placeholder="Enter email">
    <div *ngIf="contactEmail.invalid">
      Please input a valid email
    </div>
    <button type="submit" class="btn btn-primary">Send</button>
</form>

为什么原始形式总是在角度上有效

2 个答案: