Question

import {Component,ViewChild} from '@angular/core';
import {NgForm} from '@angular/forms'

@Component({
  selector: 'checkbox-configurable-example',
  templateUrl: 'checkbox-configurable-example.html',
  styleUrls: ['checkbox-configurable-example.css'],
})
export class CheckboxConfigurableExample {
  @ViewChild('formData') formData: NgForm;


  checked = false;
  indeterminate = false;
  align = 'start';
  disabled = false;

  imcheckedVal = false;
  changeCheck(){
    this.imcheckedVal = this.formData.value.check4
  }

}

模板

<form #formData = 'ngForm'>
  <md-card>
    <md-card-content>
      <h2 class="example-h2">Checkbox configuration</h2>

      <section class="example-section">
        <md-checkbox name ='check1' class="example-margin" [(ngModel)]="checked">Checked</md-checkbox>
        <md-checkbox name ='check2' class="example-margin" [(ngModel)]="indeterminate">Indeterminate</md-checkbox>
      </section>

      <section class="example-section">
        <label class="example-margin">Align:</label>
        <md-radio-group  name ='radGroup' [(ngModel)]="align">
          <md-radio-button name ='rad1' class="example-margin" value="start">Start</md-radio-button>
          <md-radio-button name ='rad2' class="example-margin" value="end">End</md-radio-button>
        </md-radio-group>
      </section>

      <section class="example-section">
        <md-checkbox  name ='check3' class="example-margin" [(ngModel)]="disabled">Disabled</md-checkbox>
      </section>
    </md-card-content>
  </md-card>

  <md-card class="result">
    <md-card-content>
      <h2 class="example-h2">Result</h2>

      <section class="example-section">
        <md-checkbox name ='check4' ngModel
            class="example-margin"
            [checked]="checked"
            [indeterminate]="indeterminate"
            [align]="align"
            [disabled]="disabled">
          I'm a checkbox
        </md-checkbox>
      </section>
    </md-card-content>
  </md-card>
</form>
<button (click) = 'changeCheck()'>get checkbox value</button>
Check box vaue is: {{imcheckedVal}}


<!-- Copyright 2017 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license -->

https://plnkr.co/edit/fhWWH3Mr994zn1vXKVAT?p=preview

在上面的链接中，我复制了角度材质示例并进行了修改以满足我的需要。

顶部有一个表单元素，稍后用于检索数据。

问题是如果你点击第一个复选框，底部的结果中的复选框被选中，但表单元素的值没有被改变你可以通过单击底部的按钮看到这一点。如果您手动单击底部复选框，则表单值仅会更改。如何使用绑定到位来更改表单值

Answer 1

您需要执行以下操作才能获得值：

<md-checkbox name ='check4' [(ngModel)]="checked" ....

Answer 2

正如Dean Chalk所述，您只需要将 [（ngModel）] 以及名称属性添加到您的素材组件，这里是一个代码snipet可能会给你一个想法。

component.html

<mat-form-field>
 <input matInput [value]="selectedWell.permit_date" 
 [matDatepicker]="picker1" placeholder="Permit Date:"
 [(ngModel)]="selectedWell.permit_date"
 name="selectedWell.permit_date">
 <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
 <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

...

<button mat-button (click)="SaveWellDetails()" color="primary">Primary</button>

component.ts

import ...
@Component({
...
})
export class WellSearchComponent implements OnInit {
...
SaveWellDetails()
{
  console.log(this.selectedWell);
}

通过这个，你可以在按钮的单击方法中找到更新的对象，记住最后任务很简单，你只需要知道你的视图，他们应该从中绑定模型。 angular将完成剩下的工作，注意material2 material4语法 [（）]

如何使用绑定到位的角度4材料更新表单值

2 个答案: