Question

以我的形式。我有accMorm的ngModel将返回对象。还有一个儿童规则，它是一个内在的对象。但是，我的类组件不接受模型声明。

基本上，我想将它们设置为null或空字符串。

这是表格：

<form>
  <input [(ngModel)]="accForm.index" name="index" type="hidden"/>
  <label class="input-group">
    <p>Admin Name</p>
    <input [(ngModel)]="accForm.name" name="name" type="text"/>
  </label>
  <label class="input-group">
    <p>Password</p>
    <input [(ngModel)]="accForm.pass" name="pass" type="password"/>
  </label>
  <label class="input-group">
    <p>Confirm Password</p>
    <input [(ngModel)]="accForm.cpass" name="cpass" type="password"/>
  </label>
  <label class="input-group">
    <p>Status</p>
    <select [(ngModel)]="accForm.status" name="status">
      <option>Active</option>
      <option>Inactive</option>
    </select>
  </label>
  <div class="radio-group">
    <label class="radio">
      <input [(ngModel)]="accForm.type" (change)="changeRules('superadmin')" name="type" type="radio" value="superadmin"/>
      <p>Super Admin</p>
    </label>
    <label class="radio">
      <input [(ngModel)]="accForm.type" (change)="changeRules('accounting')" name="type" type="radio" value="accounting"/>
      <p>Accounting</p>
    </label>
    <label class="radio">
      <input [(ngModel)]="accForm.type" (change)="changeRules('cs')" name="type" type="radio" value="cs"/>
      <p>CS</p>
    </label>
  </div>
  <div class="checkbox-group">
    <label class="checkbox">
      <input [(ngModel)]="accForm.rules.company" name="rules.company" type="checkbox"/>
      <p>Data Company</p>
    </label>
    <label class="checkbox">
      <input [(ngModel)]="accForm.rules.member" name="rules.member" type="checkbox"/>
      <p>Data Member</p>
    </label>
    <label class="checkbox">
      <input [(ngModel)]="accForm.rules.bookie" name="rules.bookie" type="checkbox"/>
      <p>Data Bookie</p>
    </label>
    <label class="checkbox">
      <input [(ngModel)]="accForm.rules.bank" name="rules.bank" type="checkbox"/>
      <p>Data Bank</p>
    </label>
    <label class="checkbox">
      <input [(ngModel)]="accForm.rules.journalentry" name="rules.journalentry" type="checkbox"/>
      <p>Journal Entry</p>
    </label>
    <label class="checkbox">
      <input [(ngModel)]="accForm.rules.journallog" name="rules.journallog" type="checkbox"/>
      <p>Journal Log</p>
    </label>
    <label class="checkbox">
      <input [(ngModel)]="accForm.rules.control" name="rules.control" type="checkbox"/>
      <p>Control</p>
    </label>
    <label class="checkbox">
      <input [(ngModel)]="accForm.rules.input" name="rules.input" type="checkbox"/>
      <p>Input</p>
    </label>
    <label class="checkbox">
      <input [(ngModel)]="accForm.rules.report" name="rules.report" type="checkbox"/>
      <p>Report</p>
    </label>
  </div>
  <button type="button" (click)="addsaveAccount(accForm)">Add / Save Admin Account</button>
</form>

到目前为止我尝试了什么。

export class ControlComponent {
    // 1st try
    accForm = any; 

    // 2nd try
    accForm = [];

    // 3rd try - still on accForm (I just tried it)
    index: any;
    name: any;
    ... and so on
    rules: any;

    // 4th try
    accForm = {
       index: null, 
       name: null,
       ... and so on,
       rules: {
          company: null,
          ... and so on
       }
    }
}

错误：无法读取未定义的属性'index'//如果我将其删除

错误：无法读取undefined // ..的属性'name'等等

所有这些都不起作用。但我也尝试在accForm上删除它（索引，名称，通行证，cpass，状态，公司，等等）

我宣称它是

index: number;
name: string;
pass: string;
... and so on

我成功了，但这不是最好的方法。最好的方法是在点击时将accForm对象传递给函数提交。

任何帮助将不胜感激。感谢。

Answer 1

你应该申报新班级。

export class AccForm {
  index: number;
  name: string;
  pass: string;
  rules: Rules = new Rules();
  ...
}

export class Rules {
  company: string;
  member: string;
  ...
}

ControlComponent：

accForm: AccForm = new AccForm();

或者您可以使用ngForm提交。阅读更多here和here。

希望这有帮助。

以angular2为单位声明/指定ngModel的类型

1 个答案: