我不知道是否有办法将 .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;
}
);
}
}
可以使用属性绑定(另请参阅 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">
我在尝试执行matInput type="datetime-local"时遇到了类似的问题。 当我调试它时,看起来 [min] 指令中的内容需要格式化为它可以理解的字符串......本质上是按照以下格式传递一个字符串:
年-月-日:月
也许不是最理想的,但是就我而言,当我像这样切换数据时,它可以工作
var month = this.formatDate(min.getMonth() + 1);
var day = this.formatDate(min.getDate());
this.minDate = min.getFullYear() + "-" + month + "-" + day + "T00:00";
其中 formatDate 是:
private formatDate(nmbr: number): string {
var date = nmbr + "";
date = (date.length < 2) ? "0" + date : date;
return date;
}
然后我可以在指令中使用它:
<input id="eventTime" matInput type="datetime-local" [min]="minDate" name="eventTime">