Angular 2 - 如何使用 ngIf 获取输入的有效状态

Question

一段时间以来，我一直在努力解决这个问题。

当我仅在条件为真时尝试在表单中输入时，我收到一个错误，即无法从 undefined 中读取无效。

使用 elvis 运算符时，我不再收到错误消息，但即使显示输入无效和脏，我仍然看不到错误消息。

<form #myForm="ngForm">
    ... other inputs ...

    <input *ngIf="model.type === 'V'" 
        name="price"
        type="number"
        required
        [(ngModel)]="model.price"
        #price="ngModel">
    <div class="errors" *ngIf="price?.invalid && price?.dirty">
        Problem detected
    </div>
</form>

有人暗示我缺少什么吗？

Answer 1

我会做什么，我会将输入和错误包装在第一个条件中：

<form #myForm="ngForm">
   <div *ngIf="model.type === 'V'" >
       <input
           name="price"
           type="number"
           required
           [(ngModel)]="model.price"
           #price="ngModel">
        <div class="errors" *ngIf="price?.invalid && price?.dirty">
           Problem detected
       </div>
    </div>
</form>

这更有意义，因为如果输入根本不存在，您不希望触发错误检查！

另一件事是，您所拥有的唯一验证是必需的，因此一旦您将此字段弄脏，它就会变得有效，除非您删除文本。