Angular Nested Form ngModel meaning

Given the following code snippet:

@Component({
selector: 'app-editor',
templateUrl: './editor.component.html',
styleUrls: ['./editor.component.scss'],
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => EditorComponent),
multi: true
}]
})
export class EditorComponent implements OnInit, OnDestroy, AfterViewInit, ControlValueAccessor{
public _editor_status: { 'opened': boolean, 'editable': boolean, 'new': boolean, 'cont': boolean, 'data': any };
@Input() form: FormDto = null;
public test:any;

updateChanges() {
.....
}
writeValue(value: any): void {
.....
}
onChange: (_: any) => void = (_: any) => { };
onTouched: () => void = () => { };
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {
this.onTouched = fn;
}
......
}

RecordManager.component.html
<app-editor *ngIf="_editor_status.opened" [editor_id]="'f41editor'"
[form]="form"
[(ngModel)]="_editor_status"
(ngModelChange)="editorChange($event)"
[ngModelOptions]="{standalone: true}">
</app-editor>

RecordManager.component.ts
....
@Component({
selector: 'app-record-manager',
templateUrl: './Record-manager.component.html',
styleUrls: ['./Record-manager.component.scss']
})

export class RecordManagerComponent implements OnInit, OnDestroy {
public _editor_status: { 'opened': boolean, 'editable': boolean, 'new': boolean, 'cont': boolean, 'data': any }
= { opened: false, editable: false, new: false, cont: false, data: null };
private form: FormDto;
......
}


Both RecordManagerComponent and EditorComponent is anuglar form, with EditorComponent nested inside RecordMangerComponent, for the code RecordManager.component.html

<app-editor *ngIf="_editor_status.opened" [editor_id]="'f41editor'"
[form]="form"
[(ngModel)]="_editor_status"
(ngModelChange)="editorChange($event)"
[ngModelOptions]="{standalone: true}">
</app-editor>

1. for

[(ngModel)]="_editor_status"


I know the right hand side "_editor_status" mean _editor_status in RecordManagerComponent, but for the left hand side, [(ngModel)], does it surely mean property _editor_status in EditorComponent as it has the same name as in the right hand side of [(ngModel)]="_editor_status", or the meaning of [(ngModel)] depends on writeValue(value:any) function? If writeValue function assign the parameter value to test property of EditorComponent, then [(ngMode)] mean test property of EditorComponent?

1. for

(ngModelChange)="editorChange($event)"


what property in EditorComponent with trigger ngModelChange? Or what property in EditorComponent will trigger this.onChange in EditorComponent? the same property as in [(ngModel)]?

1. as already have

(ngModelChange)="editorChange($event)"


then is

[(ngModel)]="_editor_status"


should change to

[ngModel]="_editor_status"

Continue reading...