Angular "Stricttemplates": True in Tsconfig. Json Disable Angular Forms
After Setting strictTemplates to True in My Tsconfig. Json, My Angular Forms Stopped Working. My angularCompilerOptions Configuration...
After setting strictTemplates to true in my tsconfig.json, my Angular forms stopped working.
My angularCompilerOptions configuration:
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true,
"strictTemplates": true // this setting even works if set to false!!! --> have to be commented out to not affect
}
My FormGroup code:
public getFormGroup(): LoginForm {
let fg = this.formBuilder.group<LoginForm['controls']>({
userName: new FormControl<string>("", Validators.required),
password: new FormControl<string>("", Validators.required),
rememberMe: new FormControl<boolean>(true)
});
return fg;
}
<form class="form-horizontal"
[formGroup]="loginFormGroup">
<div class="form-content">
<fieldset class="k-form-fieldset">
<kendo-formfield>
<input formControlName="userName"
kendoTextBox
#username
required
tmFocus
class="form-control input-underline input-lg "
[disabled]="isActing"
[placeholder]="'Username' | translate" />
</kendo-formfield>
<kendo-formfield>
<input formControlName="password"
[type]="showPassword ? 'text' : 'password'"
#passwordRef
class="form-control input-underline input-lg"
[disabled]="isActing"
[placeholder]="'Password' | translate"
required />
<button type="button"
kendoButton
iconClass="far fa-fw fa-eye"
[fillMode]="'clear'"
style="position: fixed; transform: translate(-100%, 4px); color: #c7c7c7;"
(mouseup)="showPassword = false"
(mousedown)="showPassword = true"></button>
</kendo-formfield>
<kendo-formfield>
<div class="form-group"
*ngIf="!isInMaintenanceMode">
<kendo-label [for]="rememberMeRef"
class="margin-r"
text="{{ 'Remember me' | translate }}"></kendo-label>
<kendo-switch formControlName="rememberMe"
#rememberMeRef
[onLabel]="'I'"
[offLabel]="'O'"></kendo-switch>
</div>
</kendo-formfield>
<div class="form-group">
<button kendoButton
type="submit"
(click)="onConfirm()"
id="button-login"
[iconClass]="'far fa-fw fa-sign-in-alt'"
[disabled]="isActing">{{ 'Log in' | translate }}</button>
</div>
</fieldset>
</div>
</form>
Error stack trace:
main.js:34607 LoggingService: res is not defined
Source: ReferenceError
StackTrace:
ReferenceError: res is not defined
at FormGroup._reduceChildren
at FormGroup._reduceValue
at FormGroup._updateValue
at FormGroup.updateValueAndValidity
at new FormGroup
at FormBuilder.group
at LoginComponent.getFormGroup
at LoginComponent.ngOnInit
at callHook
at callHooks
After adding the strictTemplates setting in my tsconfig.json file, I encountered a few type errors which I fixed. The project compiled without any issues. However, I then started experiencing the above error, which I initially thought was related to my form. But my forms work without any problems after deleting the strictTemplates setting.
I am using Angular version 15.1.3.
I couldn't find any Information about this type of error...