Поле форм, управляемых шаблоном Angular, считается недействительным, хотя regExp совпадает

Question

У меня есть этот вход:

    <div class="form-group">
        <label for="power">Hero Power</label>
        <input [(ngModel)]="model.powerNumber" name="powerNumber" type="text" 
            class="form-control" pattern="^[0-9]+$"id="powerNumber"> 
        <div [hidden]="powerNumber.valid" class="alert alert-danger">
            power must be a number
        </div>
    </div>

Я добавил валидатор шаблона в поле ввода (только номер должен пройти тест). Ниже ввода я добавил сообщение об ошибке, которое должно быть скрыто, когда поле ввода является действительным. Однако это показывает, даже когда я ввел значение, которое соответствует шаблону RegExp. Что я делаю не так?

Вот демонстрация Штаблица https://stackblitz.com/edit/template-driven-form-demo-wl3apt?file=app%2Fuser-form%2Fuser-form.component.ts

Answer 1

добавьте #powerNumber="ngModel" шаблон ссылки на вход ngModel и все будет работать.Это уже сделано с вводом имени в вашем примере

Answer 2

Я не знаю, подходит ли он для вас, однако вы можете использовать input только для номеров:

<input [(ngModel)]="model.powerNumber" name="powerNumber" type="number" 
            class="form-control" id="powerNumber">