Угловая привязка для поля ввода даты и времени min и max

Question

Я не знаю, есть ли способ привязать значения переменных из файла .ts к входным значениям, минимальным и максимальным свойствам. Я пробовал много способов, но ни один из них не работает.

У меня есть двусторонняя привязка, чтобы получить значение из поля ввода [(ngModel)] = "TransferPoint.arrivalTime , но мне нужно установить минимальные и максимальные свойства для определенных значений.

Это не работает: min = '{{flight.departureTime}}'

Это мой HTML-файл

<h1 mat-dialog-title>ADD NEW TRANSFER POINT</h1>
<div mat-dialog-content>


<mat-form-field>
<input type="datetime-local" id="arrival-time" name="arrival-time"  value="{{flight.departureTime}}" min="{{flight.departureTime}}"
  max="{{flight.arrivalTime}}" matInput [(ngModel)]="transferPoint.arrivalTime" placeholder="Arrival time">
</mat-form-field>
<br>
<mat-form-field>
<input type="datetime-local" id="departure-time" name="departure-time" value="2018-06-12T19:30" min="2018-06-07T00:00"
  max="2018-06-14T00:00" matInput [(ngModel)]="transferPoint.departureTime" placeholder="Departure time">
</mat-form-field>
 <br>
 <mat-form-field>
<input matInput [(ngModel)]="transferPoint.countryAndCity" placeholder="Country and City">
</mat-form-field>

</div>
<div mat-dialog-actions>
<button class="submitbtn" mat-raised-button (click)='addTransferPoint()'>ADD</button>
<button class="cancelbtn" mat-raised-button mat-dialog-close>CANCEL</button>

</div>

и вот мой файл .ts

export class AddTransferPointComponent implements OnInit {

errorMessage: string;
flightId: any;
flight: FlightDTO;
transferPoint: TransferPointDTO = new TransferPointDTO();

constructor(@Inject(MAT_DIALOG_DATA) public data: any,
          public dialogRef: MatDialogRef<any>,
          private transferPointService: TransferService,
          private flightService: FlightService) { }

ngOnInit() {
  this.flightId = this.data.flight;
}

getFlight() {
 this.flightService.getFlight(this.flightId).subscribe(
  data => {
    this.flight = data;
  }
 )
}

addTransferPoint() {
this.transferPoint.flightId = this.flightId;
this.transferPointService.createTransferPoint(this.transferPoint).subscribe(
  data => {
    this.dialogRef.close();
    location.reload();
  },
  error => {
    console.log(error);
    this.errorMessage = error.error.message;
  }
);

}

}

Answer 1

Вы можете использовать привязку свойств (см. Также https://angular.io/guide/template-syntax):

<input type="datetime-local" id="arrival-time" name="arrival-time"  [value]="flight.departureTime" [min]="flight.departureTime" [max]="flight.arrivalTime" matInput [(ngModel)]="transferPoint.arrivalTime" placeholder="Arrival time">