Cannot find control with name: 'email' in angular

user_15960900 0
Viewed 92

created formgroup emailGroup email and comfirm email group method is showing 'The declaration was marked as deprecated here.' as shown in the image enter image description here

this.employeeForm = this.fb.group({
      fullName: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(10)]],
      contactPreference: ['email'],
      emailGroup: this.fb.group({
        email: ['', [Validators.required, CustomValidators.emailDomain('dell.com')]],
        confirmEmail: ['', [Validators.required]],
      }, { validator: matchEmails }),
      phone: [''],
      skills: this.fb.group({
        skillName: ['', Validators.required],
        experienceInYears: ['', Validators.required],
        proficiency: ['', Validators.required]
      }),
    });
<div class="form-group" [ngClass]="{'has-error': formErrors.email}">
                <label class="col-sm-2 control-label" for="email">Email</label>
                <div class="col-sm-8">
                    <input id="email" type="text" (blur)="logValidationErrors()" class="form-control"
                        formControlName="email">
                    <span class="help-block" *ngIf="formErrors.email">
                        {{formErrors.email}}
                    </span>
                </div>
            </div>
            <div class="form-group" [ngClass]="{'has-error': formErrors.confirmEmail
                                                || formErrors.emailGroup}">
                <label class="col-sm-2 control-label" for="confirmEmail">
                    Confirm Email
                </label>
                <div class="col-sm-8">
                    <input id="confirmEmail" type="text" class="form-control" (blur)="logValidationErrors()"
                        formControlName="email">
                    <span class="help-block" *ngIf="formErrors.confirmEmail || formErrors.emailGroup">
                        {{formErrors.confirmEmail ? formErrors.confirmEmail
                        : formErrors.emailGroup}}
                    </span>
                </div>
angular html
1 Answers

It should be validators instead of validator

 this.employeeForm = this.fb.group({
      fullName: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(10)]],
      contactPreference: ['email'],
      emailGroup: this.fb.group({
        email: ['', [Validators.required, CustomValidators.emailDomain('dell.com')]],
        confirmEmail: ['', [Validators.required]],
      }, { validators: matchEmails }),
      phone: [''],
      skills: this.fb.group({
        skillName: ['', Validators.required],
        experienceInYears: ['', Validators.required],
        proficiency: ['', Validators.required]
      }),
    });

Then in html you should wrap email control inside emilGoup formGroup

<div formGroupName="emailGroup">
    <div class="form-group" [ngClass]="{ 'has-error': formErrors.email }">
        <label class="col-sm-2 control-label" for="email">Email</label>
        <div class="col-sm-8">
          <input
            id="email"
            type="text"
            (blur)="logValidationErrors()"
            class="form-control"
            formControlName="email"
          />
          <span class="help-block" *ngIf="formErrors.email">
            {{ formErrors.email }}
          </span>
        </div>
      </div>
      <div
        class="form-group"
        [ngClass]="{ 'has-error': formErrors.confirmEmail || formErrors.emailGroup }"
      >
        <label class="col-sm-2 control-label" for="confirmEmail">
          Confirm Email
        </label>
        <div class="col-sm-8">
          <input
            id="confirmEmail"
            type="text"
            class="form-control"
            (blur)="logValidationErrors()"
            formControlName="email"
          />
          <span
            class="help-block"
            *ngIf="formErrors.confirmEmail || formErrors.emailGroup"
          >
            {{
              formErrors.confirmEmail
                ? formErrors.confirmEmail
                : formErrors.emailGroup
            }}
          </span>
        </div>
      </div>
</div>
user_77903760
Related