Question

尝试在AgularJS中向表单添加验证，检查firstName字段是否有效，使用ngIf，
出于某种原因，无论给定输入如何，该参数始终返回true。为什么会这样？
我可以出于同样的目的检查firstName.value == ""吗？

代码：

<form>
    <div class="form-group">
        <label for="firstName">First Name :</label>
        <input ngModel name='firstName' #firstName='ngModel' (change)='log(firstName)' id="firstName" type="text" class="form-control">
        <div class='alert alert-danger' *ngIf='firstName.touched && !firstName.valid'>First Name is Required</div>
    </div>
    <div class="form-group">
        <label for="comment">Comment :</label>
        <textarea ngModel name='comment' #comment='ngModel' (change)='log(comment)' id="comment" cols="30" rows="10" class="form-control"></textarea>
    </div>
    <div class="btn btn-primary">Submit</div> 
</form>

控制台日志：

control: FormControl {validator: null, asyncValidator: null, pristine: false, touched: true, _onCollectionChange: ƒ, …}
model: ""
name: "firstName"
update: EventEmitter {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
valueAccessor: DefaultValueAccessor {_renderer: DebugRenderer2, _elementRef: ElementRef, _compositionMode: true, onChange: ƒ, onTouched: ƒ, …}
viewModel: "asd"
_parent: NgForm {submitted: false, _directives: Array(2), ngSubmit: EventEmitter, form: FormGroup}
_rawAsyncValidators: []
_rawValidators: []
_registered: true
asyncValidator: (...)
dirty: (...)
disabled: (...)
enabled: (...)
errors: (...)
formDirective: (...)
invalid: (...)
path: (...)
pending: (...)
pristine: (...)
status: (...)
statusChanges: (...)
touched: (...)
untouched: (...)
valid: true   # Here!! Always True regardless of the input
validator: (...)
value: (...)
valueChanges: (...)
__proto__: NgControl```

Answer 1

<input name="firstName" #firstName="ngModel" type="text [(ngModel)]="firstName"> 尝试像这样使用。 ngModel需要双向绑定来检查错误。

Answer 2

您尚未对表单设置任何验证，因此无论值或根本没有值，它都是有效的。例如，如果您需要该字段，则添加required属性：

<input ngModel name='firstName' #firstName='ngModel' required>

ngModel'valid'参数对于输入字段始终为true

2 个答案: