Question

我现在试图解决这个问题一段时间了。

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

当使用elvis操作符时，我不再收到错误，但即使输入显示，也无效＆amp;脏，我仍然没有看到错误信息。

<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>

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

另一方面，您需要进行唯一的验证，因此只要您将此字段设为脏，它就会生效，除非您删除文本。

Answer 2

另外还有一个问题非常相似：

AngularJS ng-if and scopes

这实际上是范围问题。

ngIf创建子范围。如果要将子作用域中的输入绑定到其父作用域中的对象，则必须先创建一个对象以将其绑定到该作用域。

例如在您的控制器中：

$scope.newObject = {type: '', price: ''};

然后在ngIf中，您可以绑定并引用已存在的对象。

<div ngIf = "newObject.type == 'V'"
     <input type="number" model="newObject.price" />
</div>

但是你不能从子ngIf范围在父作用域中创建一个新对象，所以最好在控制器中初始化这个对象，这样你就可以在子作用域中引用它。

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

2 个答案: