代码之家  ›  专栏  ›  技术社区  ›  Joseph

根据Angular 4下拉列表中的值更改日期

  •  1
  • Joseph  · 技术社区  · 8 年前

    我有一个下拉的付款条件。付款条件是有价值的。因此,我需要从当前日期中添加这些值,以便显示它。下面是我的代码。

    this.addForm = this.fb.group({
          payment_term: new FormControl(null, Validators.required),
          due_date: new FormControl(null, Validators.required),
    });
    
    
    
    onSelectPaymentTerm(event){
        console.log(event)
        this.addForm.patchValue({
          due_date: this.date.setDate( this.date.getDate() + event)
        })
      }
    

    HTML

    <div class="form-group row">
        <label class="col-sm-3 col-form-label">Payment Term</label>
        <div class="col-sm-9">
            <select type="text" class="form-control" formControlName="payment_term" (ngModelChange)="onSelectPaymentTerm($event)">
                <option value="null" hidden>-- Select Payment Term --</option>
                <option *ngFor="let payment of payments" [value]="payment?.value">{{ payment?.name }}</option>
            </select>
        </div>
    </div>
    
    <div class="form-group row">
        <label class="col-sm-4 col-form-label">Due Date</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" formControlName="due_date" readonly>
        </div>
    </div>
    
    1 回复  |  直到 8 年前
        1
  •  1
  •   Abhijit Kar ツ    8 年前

    看看下面的内容-使用Vanilla JS

    Demo

    更干净的方法-使用力矩。js公司

    Demo

    解决方案

    1. 通过和通过使用反应形式
    2. 无需使用 (ngModelChange)="onSelectPaymentTerm($event)" 。但这不是问题所在
    3. 所选值以字符串形式出现,因此在添加到日期之前,必须使用parseInt转换为整数
    4. 喜欢当下。js用于Javascript中的日期操作
    推荐文章