2

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

Schurke
  • 21
  • 1
  • You're mixing formBuilder and new FormGroup, I imagine you want to write: `const fg = new FormGroup({...})`. See that when you use formBuilder you write `this.fb.group({string:value,string:value})`, and when use FormGroup you write `new FormGroup({string:new FormControl()})` – Eliseo Apr 17 '23 at 13:22

0 Answers0