Почему привязка не работает должным образом при использовании обязательного атрибута?

У меня есть следующий HTML-код в компоненте Angular, который вызывается для отображения сведений о записи:

<div class="form-group">
    <label for="date1">Date 1 *</label>
    <div class="input-group">
      <input 
          class="form-control" 
          placeholder="yyyy-mm-dd" 
          id="date1" 
          name="date1"
          [ngModel]="date1"
          required
          #date1=ngModel
          [class.field-error]="form.submitted && date1.invalid"
          ngbDatepicker #da2="ngbDatepicker" 
          tabindex="13">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary calendar" (click)="da2.toggle()" type="button"></button>
      </div>
    </div>
</div>

Как видите, это элемент управления вводом, отображающий значение даты в формате гггг-ММ-дд.

Переменная date1, которая используется в ngModel, имеет формат JSON: {год: 1999, месяц: 01, день: 01}.

Таким образом, когда компонент визуализируется, этот конкретный элемент управления не отображает значение привязки в переменной date1. Однако, если я удалил обязательный атрибут, значение будет отображаться.

Кто-нибудь знает, как достичь обеих этих функций? Отображение значения даты без удаления обязательного атрибута?

angular angular-forms angular-validation

MikePR 20.08.2019 источник

Ответы (2)

arrow_upward
1
arrow_downward

Причина

На входе не отображается значение привязки, потому что для id и name установлено значение date1, а переменная также имеет имя date1.

Решение

Переименуйте переменную типа NgbDateStruct, использованную в [ngModel]="date1", в что-то еще, например myDate.

Пример

ts:

myDate: NgbDateStruct = { year: 1969, month: 11, day: 2 };

html:

<div class="form-group">
    <label for="date1">Date 1 *</label>
    <div class="input-group">
        <input 
        class="form-control" 
        placeholder="yyyy-mm-dd" 
        id="date1" 
        name="date1"
        [ngModel]="myDate"
        required
        #date1=ngModel
        ngbDatepicker #da2="ngbDatepicker" 
        tabindex="13">
        <div class="input-group-append">
            <button class="btn btn-outline-secondary calendar" (click)="da2.toggle()" type="button"></button>
        </div>
    </div>
</div>

Результат

scopchanov 20.08.2019

comment

Большое спасибо. Я этого не заметил. Теперь я изменил имя переменной, которая привязана к ngModel, и теперь она также работает с обязательным атрибутом. - MikePR; 20.08.2019

arrow_upward
0
arrow_downward

Вместо одного элемента управления отслеживание трех разных атрибутов (год, месяц и день). Почему бы вам не преобразовать объект JSON в новый объект даты и не привязаться к нему. Этот объект будет содержать все значения.

var d = new Date(2019, 11, 10);  // The 11 represents December. Subtract One from the month.

Это должно устранить необходимую проблему. Какой тип объекта Date1? Это должно быть свидание.

L Johnson 20.08.2019