Параметр 'valid' для ngModel всегда имеет значение true для поля ввода

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

Вы не установили никаких проверок для своей формы, поэтому она действительна независимо от значения или не имеет значения вообще. Если вы хотите, например, обязательное поле, добавьте атрибут required:

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

Answer 2

<input name="firstName" #firstName="ngModel" type="text [(ngModel)]="firstName"> Попробуйте использовать вот так. Для проверки ошибок ngModel необходима двусторонняя привязка.