Angular 4/5 datepicker - 双向绑定值

时间:2018-04-20 10:46:40

标签: angular typescript angular-material

我有一个步进过程表单,第一步要求用户使用角度材料设计datepicker组件选择日期。

当用户进入下一步时,我想绑定他们选择的值并在输入字段的顶部再次显示它们(他们也应该能够在这里更改它)。

我已尝试[(ngModel)]但不确定我是否正常执行

    <mat-form-field>
       <input [(ngModel)]="date" formControlName="dateFormCtrl" matInput [matDatepicker]="picker" [max]="maxDate" [min]="minDate" placeholder="When is your event?" readonly> 
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> 
<mat-datepicker #picker></mat-datepicker> 
<mat-error>The input is required.</mat-error>
    </mat-form-field>

2 个答案:

答案 0 :(得分:0)

使用var http = require('http'); // 1 - Import Node.js core module var server = http.createServer(function (req, res) { // 2 - creating server //handle incomming requests here.. }); server.listen(5000); //3 - listen for any incoming requests console.log('Node.js web server at port 5000 is running..')

示例:

[formControl]="dateFormCtrl"

<input [formControl]="dateFormCtrl" matInput [matDatepicker]="picker" [max]="maxDate" [min]="minDate" placeholder="When is your event?" readonly> 文件中,您应该有一个变量.ts

dateFormCtrl

现在可以使用dateFormCtrl = new FormControl(new Date()); // this will display your date in the picker 在任何地方访问该值。

根据您的情况,您还可以在dateFormCtrl.value的输入中以[value]="dateFormCtrl.value"显示。

答案 1 :(得分:0)

在Angular 4和Angular 5中,可以在Reactive Forms中使用@Autowired private ProductClient productClient; @Override protected void executeInternal(JobExecutionContext context) throws JobExecutionException { List<Long> ProductsIds = fetchAllProductIdsFromDb(); ProductsExecutor productsExecutor=new ProductsExecutor(); productsExecutor.runTasks(ProductsIds); } 。但是,为了使设计适应未来的发展,最好直接引用private int threadPoolSize=10; private ExecutorService executorService; public ProductsExecutor() { executorService =Executors.newFixedThreadPool(threadPoolSize); } public void runTasks(List<Integer> productIds) { //Loop and execute the task and wait for them it necessary ProductsWorker worker=new ProductsWorker(); worker.setProductId(productId); executorService.invokeAll(worker); } 的值,假设您希望使用反应形式而不是模板驱动形式。

Angular Docs for FormControlName

  

在Angular v6中已弃用对ngModel输入属性和FormControl事件与反应形式指令的支持,而在Angular v7中将不再支持。

     

现在已弃用:

ngModel

Datepicker组件

ngModelChange

Datepicker模板

<form [formGroup]="form">
  <input formControlName="first" [(ngModel)]="value">
</form>