未定义标识符“已提交”

Question

I am trying to implement a client side validation in angular using ReactiveForms. I get the error of "Identifier 'submitted' is not defined. 'FormGroup' does not contain such a member" in the line of

<div *ngIf="form.submitted && !firstName.valid">

and when I actually submit, my labels for validation, it does not appear. But if I remove the "form.submitted" my validation labels appear. Please see my code below:

This is in the component.ts to start the creation of the form:

ngOnInit() {
    this.createForm();
}
createForm() {
    this.form = new FormGroup({
      firstName: new FormControl(null, {
        updateOn: 'submit',
        validators: [Validators.required]
      }),
      middleName: new FormControl(null, {
        updateOn: 'submit',
      }),
      lastName: new FormControl(null, {
        updateOn: 'submit',
        validators: [Validators.required]
      }),
      userName: new FormControl(null, {
        updateOn: 'submit',
        validators: [Validators.required]
      }),
      email: new FormControl(null, {
        updateOn: 'submit',
        validators: [Validators.pattern(this.emailRegex)]
      }),
      password:  new FormControl(null, {
        updateOn: 'submit',
        validators: [Validators.required]
      })
    });
}

and in my html I use it like so:

<form [formGroup]="form" (ngSubmit)="form.valid && onSubmit(form)">
  <input type="text"
    matInput
    formControlName="firstName"
    placeholder="First Name"
    required
    [ngClass]="{ 'invalid-textbox' : form.submitted && !firstName.valid }"
  />
  <div *ngIf="form.submitted && !firstName.valid">
    <label class="validation-message">First Name is required</label>
  </div>
  ... Many others ...
  <input type="submit" value="Sign Up" />
 </form>

I need your help please. Thank you.

Answer 1

Change your code to

TS file using formBuilder to build form

constructor(private formBuilder: FormBuilder) {
}

    form: FormGroup;

         createForm() {
            this.form = this.formBuilder.group({
              firstName: ['', Validators.required],
              middleName: [''],
              lastName: ['', Validators.required],
              email: ['', [Validators.required, Validators.email]],
              password: ['', [Validators.required, Validators.minLength(6)]],

            });
          }

          ngOnInit() {
            this.createForm();
          }

HTML

<div class="form-group">
                        <label>First Name</label>
                        <input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" />
                        <div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
                            <div *ngIf="f.firstName.errors.required">First Name is required</div>
                        </div>
                    </div>

https://stackblitz.com/edit/angular-7-validate-form-angular

Answer 2

please create the filed submitted=false in component.ts file then,

createForm() {
this.submitted = true;

if (this.registrationFrom.invalid) {
  return;
}
alert('SUCCESS!! :-));'