CODEWITHSUNDEEP
angularangular-formsangular-formbuilder
Hassan Rahman
Hassan Rahman

Reputation: 5213

Angular 6 form submitted property does not exist

I am build an angular application in which I used angular forms. It works well on angular 5 and also on angular 6. But when I go to deploy it by ng build -prod it gives the errors

enter image description here

Here is my code for logincomponent

<form class="md-float-material form-material" [formGroup]="loginForm" (ngSubmit)="onSubmit()">
    <div class="text-center">
        <img src="../../assets/images/logo.png" alt="logo.png">
    </div>
    <div class="auth-box card">
        <div class="card-block">
            <div class="row m-b-20">
                <div class="col-md-12">
                    <h3 class="text-center">User Login</h3>
                </div>
            </div>
            <div class="form-group form-primary">
                <label for="username">Username</label>
                <input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
                <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
                    <div *ngIf="f.username.errors.required">Username is required</div>
                </div>
            </div>
            <div class="form-group form-primary">
                <label for="password">Password</label>
                <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
                <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
                    <div *ngIf="f.password.errors.required">Password is required</div>
                </div>
            </div>
            <div class="form-group form-primary">
                <button class="btn btn-primary btn-md btn-block waves-effect waves-light text-center m-b-20">Login</button>
            </div>
            <div class="row">
                <div class="col-md-2">
                    <img src="../../assets/images/Logo-small-bottom.png" alt="small-logo.png">
                </div>
            </div>
        </div>
    </div>
</form>

And here is TS Code

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AlertService, UserService } from '../_services';

@Component({ templateUrl: 'login.component.html' })
export class LoginComponent implements OnInit {
    loginForm: FormGroup;
    returnUrl: string;
    selectedValue: 'observer';

    constructor(
        public formBuilder: FormBuilder,
        public route: ActivatedRoute,
        public router: Router,
        public userService: UserService,
        public alertService: AlertService) { }

    public ngOnInit() {
        this.loginForm = this.formBuilder.group({
            username: ['', Validators.required],
            password: ['', Validators.required],
        });

        this.userService.logout();

        this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
    }

    get f() { return this.loginForm.controls; }

    public onSubmit() {

        if (this.loginForm.invalid) {
            return;
        }


        this.userService.login(this.loginForm.value)
            .subscribe(
                response => {
                    this.alertService.success('User Authenticated', true);
                },
                error => this.alertService.error(error, false)
            );
    }
}

Upvotes: 1

Views: 1651

Answers (2)

user3506
user3506

Reputation: 119

In this specific case, I would create an instance of FormControl in our class. For e.g. loginForm = new FormControl();

Here is a good explanation of your problem: https://www.concretepage.com/angular-2/angular-2-formcontrol-example

Upvotes: 0

alchi baucha
alchi baucha

Reputation: 1040

This error is a result of AoT(Ahead of Time) compilation.

The reason why these errors don't show up while running "ng serve" is because ng serve performs JiT(Just in Time) compilation.

In AoT compilation, you have to have each and every methods/variables declared along with many other things.

Once you define the missing variables (like submitted on the LoginComponent) on your ts, those errors will go away.

Upvotes: 1

Related Questions