Проверка предварительно заполненного поля ввода углового - PullRequest
Новая
       22

Проверка предварительно заполненного поля ввода углового

0 голосов
/ 25 апреля 2018

У меня есть следующий код: 

<h1>New Book</h1>
<form  #f="ngForm" (ngSubmit)="submit(f)">
   <div class="form-group">
        <label for="group">Group</label>
        <select id="group" class="form-control" (change)="onGroupChange()" [(ngModel)]="groupId" name="groupId">
            <option value=""></option>
            <option *ngFor="let g of groups" value="{{g.id}}">{{g.name}}</option>
        </select>
    </div>
    <div class="form-group">
        <label for="registrationNumber">Registration Number</label>
        <input required ngModel name="registrationNumber" #registrationNumber="ngModel" id="registrationNumber" class="form-control" value={{regId}}/>
        <div class="alert alert-danger" *ngIf="!registrationNumber && !registrationNumber.valid">Registration Number  is required.</div>
    </div>
 <button class="btn btn-primary" [disabled]="!f.valid">Save</button>
</form>

Как видите, кнопка отключена, если одно из значений формы недопустимо. Проблема в том, что регистрационный номер заполняется при выборе группы в раскрывающемся списке групп. Даже после заполнения поля регистрационного номера кнопка сохранения по-прежнему отключена. Какую проверку я должен написать в * ngIf регистрационного номера, чтобы указать угловому метку пометить поле как нормально, если поле имеет значение.

Другими словами, что должно быть в ngIf ниже? 

<div class="alert alert-danger" *ngIf=" ? "**>Registration Number  is required.</div>
    </div>

1 Ответ

0 голосов
/ 25 апреля 2018

Вам необходимо установить значение с помощью ngModel, и тогда проверка должна работать как положено. 

<input required [ngModel]="regId" name="registrationNumber" #registrationNumber="ngModel" id="registrationNumber" class="form-control"/>

Кроме того, вы можете упростить ngIf, используя оператор нуль-коалесцирования 

<div class="alert alert-danger" *ngIf="!registrationNumber?.valid">Registration Number  is required.</div>
...