Question

我正在构建一个Angular应用程序，我在表单验证中使用md-slide-toggle组件。

在onSubmit方法上，当我将值记录到控制台时，默认情况下它会记录为null。默认情况下，如何将md-toggle-slide的值指定为false？

<form #formtest="ngForm" (ngSubmit)="onSubmit(formtest.value)">

    <div class="form-group" *ngFor="let temp of value">
    <md-slide-toggle [checked]="isChecked" color="primary" name={{temp}} ngModel> {{temp}}</md-slide-toggle>
    </div>
    <button md-raised-button type="submit">Check</button>
  </form>

Answer 1

在app.component.ts中，从@angular/core导入OnInit，然后添加ngOnInit lifecycle hook方法，声明以及您在加载时初始化的其他内容。

<强> app.component.ts ：

import {Component, OnInit} from '@angular/core';
// Your other imports here

@Component({
    selector: 'app-root',
    templateUrl: '/path/to/app.component.html'
})

export class AppComponent implements OnInit {
    checked: boolean;
// NgOnInit is required or else Angular will throw an error
    ngOnInit() {
        this.checked = false;
    }
}

或者，最初为属性赋值：

import {Component} from '@angular/core';
// Your other imports here

@Component({
    selector: 'app-root',
    templateUrl: '/path/to/app.component.html'
})
export class AppComponent {
    checked: boolean = false;
}

Answer 2

可以通过以下在组件文件中创建变量的简单方法来解决此问题：

public value = [
  {name:'one', checked:false},
  {name:'two', checked:false},
  {name:'three', checked:false}
];

使用以下HTML代码将它们绑定到组件：

<form #formtest="ngForm" (ngSubmit)="onSubmit(formtest.value)">

    <div class="form-group" *ngFor="let temp of value">
    <md-slide-toggle color="primary" [name]="temp.name" [(ngModel)]="temp.checked">{{temp.name}}</md-slide-toggle>
    </div>
    <button md-raised-button type="submit">Check</button>
</form>

Angular Material幻灯片切换组件默认为null

2 个答案: