Angular 7 + Material: при использовании нескольких мат-флажков внутри формы данные загружаются в поля только после взаимодействия с ними - PullRequest
Новая
       5

Angular 7 + Material: при использовании нескольких мат-флажков внутри формы данные загружаются в поля только после взаимодействия с ними

0 голосов
/ 18 января 2019

Я столкнулся с пробемом при попытке реализовать простую страницу настроек пользователя в угловом стиле материала. Я создал форму и поставил там два флажка mat-box, а также поле matInput. Значения в полях и состоянии флажков должны отображаться на основе предыдущих данных. Тем не менее, данные не загружаются в них, пока я не начну взаимодействовать с полями. Более того, состояние mat-checkbox не меняется на реальное, и они остаются непроверенными. Снятие одного флажка, а также помещение их вне формы заставляет все работать.

Вот мой код:

app.component.ts 

@Component({
  selector: 'checkbox-configurable-example',
  templateUrl: 'checkbox-configurable-example.html',
  styleUrls: ['checkbox-configurable-example.css']
})
export class CheckboxConfigurableExample implements OnInit {
  settingsAccount = {
        activated: true,
        email: 'test@test.com',
        firstName: 'test',
        langKey: 'en',
        lastName: 'test',
        login: 'test',
        imageUrl: null,
        userId: 1
    };
  settingsWorker: any;
  ngOnInit() {
    this.settingsWorker = {
      nurse: true,
      student: false,
      workload: 0.5
    };
  }

  save(): void {
    const temp = 2;
  }
}

app.component.html 

<mat-card>
  <mat-card-content>
    <form name="form" role="form" (ngSubmit)="save()" *ngIf="settingsAccount && settingsWorker" novalidate>
      <div class="form-group">
        <input type="checkbox" name="Student" [(ngModel)]="settingsWorker.student"><label for="Student">Student</label>
        <input type="checkbox" name="Nurse" [(ngModel)]="settingsWorker.nurse"><label for="Nurse">Nurse</label>
      </div>
      <div class="form-group">
          <mat-checkbox [(ngModel)]="settingsWorker.student">Student</mat-checkbox>
          <mat-checkbox [(ngModel)]="settingsWorker.nurse">Nurse</mat-checkbox>
      </div>
      <div>
          <input matInput type="number" [(ngModel)]="settingsWorker.workload" min="0.25" max="1.0"
                  class="form-control" id="workload" #workloadInput="ngModel"
                  step="0.25" name="Workload" placeholder="Workload" required>
          <div *ngIf="workloadInput.dirty &&
          (workloadInput.invalid || workloadInput.value > 1 || workloadInput.value < 0.25)">
              <mat-error class="error-text">
                  Please enter integers in range 0.25-1
              </mat-error>
          </div>
      </div>
      <button type="submit" [disabled]="settingsForm.form.invalid" class="btn           btn-primary">Save</button>
    </form>
  </mat-card-content>
</mat-card>

Доступен интерактивный код stackblitz

Заранее спасибо!

...