时间戳

首页 > 解决方案 > 我的角度模板驱动表单中的复选框有一些错误，

angular - 我的角度模板驱动表单中的复选框有一些错误，

问题描述

我有一个模板驱动的表单，包括以下复选框：

<div class="form-group">
    <label class="col-sm-3 control-label">Communication</label>
    <div class="col-sm-9">
        <label class="checkbox-inline">       
            <input type="checkbox" name="email" #email="ngModel" [(ngModel)]="projectSettings.communication.email" value="email">Email
        </label>

        <label class="checkbox-inline">
            <input type="checkbox" name="sms" #sms="ngModel" [(ngModel)]="projectSettings.communication.sms" value="sms">SMS
        </label>

        <label class="checkbox-inline">
            <input type="checkbox" name="phone" #phone="ngModel" [(ngModel)]="projectSettings.communication.phone" value="phone">Phone
        </label>
    </div>
</div>

我首先有两个数据模型：

import { Communication } from './communication.model';

export class WizardData {
    id: number;
    name: string = '';
    owner: string = '';
    customer: string = '';
    email: string = '';
    phone: string = '';
    webSite: string = '';
    language: string = '';
    time: string = '';
    communication: Communication; 
    address1: string = '';
    address2: string = '';
    postCode: string = '';
    state: string = '';
    country: string = '';
    city: string = '';

    clear() {
        this.name = '';
        this.owner = '';
        this.customer = '';
        this.email = '';
        this.phone = '';
        this.webSite = '';
        this.language = '';
        this.time = '';
        this.communication.email = '';
        this.communication.sms = '';
        this.communication.phone = '';
        this.address1= '';
        this.address2= '';
        this.postCode= '';
        this.city = '';
        this.state= '';
        this.country = '';
    }
}


export class ProjectDetails {
    name: string = '';
    owner: string = '';
    customer: string = '';
    email: string = '';
    phone: string = '';
    webSite: string = '';
}


export class ProjectSettings {
    language: string = '';
    time: string = '';
    communication: Communication;
}


export class DeliveryDetails {
    address1: string = '';
    address2: string = '';
    postCode: string = '';
    city: string = '';
    state: string = '';
    country: string = '';
}

最后一个里面的另一个dataModel就像：

export class Communication {
    email: Boolean = false;
    sms: Boolean = false;
    phone: Boolean = false;
}

当我运行我的应用程序时，在 [(ngModel)]="projectSettings.communication.email" 部分输入 type="checkbox" 出现此错误（当我删除它时，一切都会好起来的！）：

错误类型错误：无法读取 Object.eval [as updateDirectives] 处未定义的属性“电子邮件”（ProjectSettingsComponent.html:26）

请帮忙！

标签： angularformsangular-template-form

解决方案

您很可能是通过某种异步方法获取数据，这意味着projectSettings.communication尚未设置。您应该使用解析器在组件呈现之前获取数据，或者使用 an*ngIf这样您就可以等待它：

<div *ngIf="projectSettings.communication" class="form-group">
  <label class="col-sm-3 control-label">Communication</label>
  <div class="col-sm-9">
    <label class="checkbox-inline">       
      <input type="checkbox" name="email" #email="ngModel"
             [(ngModel)]="projectSettings.communication.email" value="email">
        Email
    </label>

    <label class="checkbox-inline">
      <input type="checkbox" name="sms" #sms="ngModel" 
             [(ngModel)]="projectSettings.communication.sms" value="sms">SMS
    </label>

    <label class="checkbox-inline">
      <input type="checkbox" name="phone" #phone="ngModel" 
             [(ngModel)]="projectSettings.communication.phone" value="phone">Phone
    </label>
  </div>
</div>

如果这没有显示表单，您应该检查您的数据响应以查看数据结构是否与您的模型结构相同

推荐阅读