I recently started learning Angular and I'm facing a form issue. I currently have a form with a label and an input field. Since this is quite a large form I decided to make a separate component for the input and validation of the form.
A table row therefore looks like this:
<tr
app-table-row-input
[label]="'ConfigInterval'"
[formControl]="RestForm.controls['ConfigInterval']"
[type]="'number'"
></tr>
HTML table-row-input
<th>
<label class="required"></label>
</th>
<th>
<input
type=""
[ngClass]="{
'validation invalid': !ngControl.valid
}"
style="width: auto"
class="fullwidth"
[formControl]="ngControl.control"
required
/>
<span
class="validation-msg"
*ngIf="ngControl.invalid && (ngControl.dirty || ngControl.touched)"
>
Not valid
</span>
</th>
The types of number and text result in the form input being updated. However when I try to also use this for the checkbox type the form isn't updated with "true" or "false" like it does when not using a separate component. My code for the checkbox currently looks like this:
html parent Form component
<tr
app-table-checkbox
[label]="'AuthEnabled'"
[formControl]="RestForm.controls['AuthEnabled']"
[id]="'cb1'"
[type]="'checkbox'"
></tr>
html checkbox input component:
<th>
<label class="required"></label>
</th>
<th>
<input
type=""
class="fullwidth"
id=""
[formControl]="ngControl.control"
required
/>
<label for="">True or False</label>
</th>
The TS in both components looks the same (except for id property not being there):
export class TableCheckboxComponent implements ControlValueAccessor {
@Input() label: string;
@Input() type = 'text';
@Input() id: string;
constructor(@Self() public ngControl: NgControl) {
ngControl.valueAccessor = this;
}
writeValue(obj: any): void {}
registerOnChange(fn: any): void {}
registerOnTouched(fn: any): void {}
}
Can somebody explain why the text and number inputs do work but this doesnt work for the checkbox?
Aucun commentaire:
Enregistrer un commentaire