user111111 user111111 - 2 months ago 16
TypeScript Question

Declaring/Assigning type of ngModel in angular2

In my form. I have ngModel of accForm which will return object. And also there's a child rules which is an inner object. However, my class component is not accepting the declaration of model.

Basically, I want to set them into null or empty string.

This is the form:

<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>


What I tried so far.

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
}
}
}


Error: Cannot read property 'index' of undefined // If I removed it

Error: Cannot read property 'name' of undefined // .. and so on

All of it doesn't work. But I also tried to remove it on accForm which becomes (index, name, pass, cpass, status, company, ... and so on)

I declared it as

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


I was successful but this isn't the best way to do this. The best way is to pass the accForm object to the function when clicked | submitted.

Any help would be appreciated. Thanks.

Answer

You should declare new class.

export class AccForm {
  index: number;
  name: string;
  pass: string;
  ...
}

and in your ControlComponent: accForm: AccForm = new AccForm();

Hope this helps.