form.valid always true angular

Question

I am working on angular form validation after user clicks on submit button, I am setting the required validations to empty fields on submit and also the error messages as 'required' showing in the form but after that the form is getting submitted. I have searched for solutions but did not get any one working.

component.html:

<form [formGroup]="companyForm" #formDir="ngForm" >
      <!-- company details -->

        <ng-container formGroupName="company_details">
          <div *ngSwitchCase="'company_details'">
            <div fxLayout="row wrap">
              <div fxFlex="50">
                <mat-form-field appearance="outline" class="example-full-width w-80-p">
                    <mat-label>company name</mat-label>
                  <input matInput formControlName="name">
                </mat-form-field>
              </div>
              <div fxFlex="50">
                <mat-form-field appearance="outline" class="example-full-width w-80-p">
                    <mat-label>display name</mat-label>
                  <input matInput formControlName= "display_name">
                </mat-form-field>
              </div>
            </div>
          </div>
        </ng-container>
        <ng-container formGroupName="company_settings">
          <div *ngSwitchCase="'company_details'">
            <div fxLayout="row wrap">
              <div fxFlex="50">
                <mat-form-field appearance="outline" class="example-full-width w-80-p">
                    <mat-label>website</mat-label>
                  <input matInput formControlName="website">
                </mat-form-field>
              </div>
              <div fxFlex="50">
                <mat-form-field appearance="outline" class="example-full-width w-80-p">
                  <!-- <input matInput placeholder="FISCAL START" value="January 2018"> -->
                  <mat-label>fiscal start</mat-label>
                  <mat-select formControlName="fiscal_start">
                    <mat-option *ngFor="let fl of FiscalList | keyvalue" [value]="fl.key">
                      {{fl.value}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </div>

              <div fxFlex="50">
                <mat-form-field appearance="outline" class="example-full-width w-80-p">
                    <mat-label>company contact</mat-label>
                  <input matInput  formControlName="contact_number">
                </mat-form-field>
              </div>
              <div fxFlex="50">
                <mat-form-field appearance="outline" class="example-full-width w-80-p">
                    <mat-label>faxe</mat-label>
                  <input matInput formControlName="fax">
                </mat-form-field>
              </div>
              <div fxFlex="100">
                <h2 class="text-uppercase font-weight-900 font-size-18">Description</h2>
                <div fxfill fusePerfectScrollbar>
                  <quill-editor [style.display]="'inline-block'" [style.height]="'200px'" #description
                    formControlName="description">
                  </quill-editor>
                </div>
              </div>
            </div>
          </div>
          <div *ngSwitchCase="'logos'">
            <div class="page-layout simple">
              <div class="logo-bg">
                <div fxLayout="row wrap" fxFill>
                  <div fxFlex="50" class="px-24 pb-24 text-center">
                    <h4 class="font-size-16 text-bold text-center mb-0">Company Logo </h4>
                    <span class="text-normal">500px X 300px</span>
                    <div class="file-upload-bg p-12">
                      <div class="text-center h-160">
                        <!-- <img src={{logo_path}} style="max-width:100%;height: 130px;"> -->
                        <img [src]="url" style="max-width:100%;height: auto;">
                      </div>
                      <div class="file-upload text-center">
                        <label for="file"> Choose file </label>
                        <input type="file" accept="image/*" id="file" formControlName="company_logo" 
                          (change)="onSelectFile($event)">
                      </div>
                    </div>

                  </div>

                  <div fxFlex="50" class="px-24 pb-24 text-center">
                    <h4 class="font-size-16 text-bold text-center mb-0">Social Media Logo </h4>
                    <span class="text-normal">500px X 300px</span>
                    <div class="file-upload-bg p-12">
                      <div class="text-center h-160">
                         <img [src]="url1" style="max-width:100%;height: auto;">
                      </div>
                      <div class="file-upload text-center">
                        <label for="file1"> Choose file </label>
                        <input type="file" accept="image/*" id="file1" formControlName="social_media_logo_path"  (change)="onSelectFile1($event)">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div *ngSwitchCase="'locale_information'">
            <div fxLayout="row wrap">
              <div fxFlex="50">
                <mat-form-field appearance="outline" class="w-80-p">
                  <mat-label>Currency</mat-label>
                  <mat-select formControlName="currency">
                    <mat-option *ngFor="let currency of currencyList | keyvalue" [value]="currency.key">
                      {{currency.value}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </div>
              <div fxFlex="50">
                <mat-form-field appearance="outline" class="w-80-p">
                  <mat-label>Date Format</mat-label>
                  <mat-select formControlName="date_format">
                    <mat-option *ngFor="let df of defaultDateFormats | keyvalue" [value]="df.key">
                      {{df.value}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </div>
              <div fxFlex="50"> 
                <mat-form-field appearance="outline" class="w-80-p">
                  <mat-label>Timezone</mat-label>
                  <mat-select formControlName="timezone">
                    <mat-option *ngFor="let tz of timezone_list[userList.country_id]" [value]="tz.id">
                      {{tz.name}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </div>
              <div fxFlex="50">
                <mat-form-field appearance="outline" class="w-80-p">
                  <mat-label>Time Format</mat-label>
                  <mat-select formControlName="timeformat">
                    <mat-option *ngFor="let tf of timeformat | keyvalue" [value]="tf.key">
                      {{tf.value}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </div>
            </div>
          </div>
          <div *ngSwitchCase="'resume_inbox_config'">
            <mat-checkbox formControlName="resume_inbox_non_user" (change)="changeSelect($event)" > 
              All non users to send resumes
            </mat-checkbox>
            <br>
            <mat-form-field appearance="outline" *ngIf="companyForm.get('company_settings').get('resume_inbox_non_user').value" class="example-full-width w-40-p mt-12">
              <mat-label>Candidate Owner</mat-label>
              <mat-select formControlName="resume_inbox_contact_owner" multiple>
                <mat-option *ngFor="let eachc of candidateList" [value]="eachc">{{eachc.name}}</mat-option>
              </mat-select>
              <mat-error *ngIf="(companyForm.get('company_settings').get('resume_inbox_non_user').value && companyForm.get('company_settings').get('resume_inbox_contact_owner').errors?.required) ">
                Candidate Owner is required
              </mat-error>
            </mat-form-field>
          </div>
        </ng-container>

        <div *ngSwitchCase="'billing_address'">
          <ng-container formGroupName="billing" >
            <!-- <form> -->
            <div fxLayout="row wrap" class="pl-28">
              <div fxFlex="50">
                <mat-form-field appearance="outline" class="example-full-width w-80-p">
                    <mat-label>street</mat-label>
                  <input matInput formControlName="street">
                </mat-form-field>
              </div>
              <div fxFlex="50">
                <mat-form-field appearance="outline" class="example-full-width w-80-p">
                    <mat-label>city</mat-label>
                  <input matInput formControlName="city">
                </mat-form-field>
              </div>
              <div fxFlex="50">
                <mat-form-field appearance="outline" class="w-80-p">
                  <mat-label>Country</mat-label>
                  <mat-select formControlName="country">
                    <mat-option value="">-- Select Country --</mat-option>
                    <mat-option *ngFor="let country of objectValues(masterdatalist.countriesList)" [value]="country.id">
                      {{country.name}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </div>
              <div fxFlex="50">
                <mat-form-field appearance="outline" class="w-80-p">
                  <mat-label>State</mat-label>
                  <mat-select formControlName="state">
                    <mat-option *ngFor="let state of masterdatalist.countriesStates[companyForm.get('billing').get('country').value]" [value]="state.id">
                      {{state.name}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>
              </div>
              <div fxFlex="50">
                <mat-form-field appearance="outline" class="example-full-width w-80-p">
                    <mat-label>zip</mat-label>
                  <input matInput formControlName="zip">
                </mat-form-field>
              </div>
            </div>
          </ng-container>
        </div>

        <div *ngSwitchCase="'ip_restrictions'">
          <div class="mb-20" fxLayout="row wrap" fxLayoutAlign="start center">
            <span class="mr-12">
              Applicable to:
            </span>
            <div *ngFor="let user of companyForm.get('applicable_to').controls; let i = index" >
              <mat-checkbox class="mr-32" *ngIf="i === 0" [formControl]="user" [checked]="user.value === 1 ? true : false ">Recruitment Activities</mat-checkbox>
              <mat-error *ngIf="(user.touched || user.untouched) && !user.valid">
                Required
              </mat-error>
              <mat-checkbox [formControl]="user" *ngIf="i === 1" [checked]="user.value === 1 ? true : false " (change)="checkRecruitment($event);">HR Management</mat-checkbox>
            </div>
          </div>
          <div formArrayName="company_ip_addresses">
            <div *ngFor="let item of companyForm.get('company_ip_addresses').controls; let i=index; let isFirst = first">
              <ng-container [formGroupName]="i">

              <div fxLayout="row wrap" fxLayoutAlign="space-around center">
                <div fxFlex="30">
                  <mat-form-field appearance="outline" class="example-full-width" class="w-90-p">
                      <mat-label>start ip</mat-label>
                    <input matInput formControlName="start_ip" (blur)="checkStartEndIP($event.target.value,i,'start_ip')" >

                    <mat-error *ngIf="(companyForm.get('company_ip_addresses').at(i).controls.start_ip.touched  || companyForm.get('company_ip_addresses').at(i).controls.start_ip.untouched) && companyForm.get('company_ip_addresses').at(i).controls.end_ip.valid && !companyForm.get('company_ip_addresses').at(i).controls.start_ip.value ">
                      Required Start IP
                    </mat-error>
                    <mat-error *ngIf="((companyForm.get('company_ip_addresses').at(i).controls.end_ip.dirty || companyForm.get('company_ip_addresses').at(i).controls.end_ip.touched) && companyForm.get('company_ip_addresses').at(i).controls.start_ip.errors?.pattern)">
                        Invalid Start IP
                    </mat-error>
                  </mat-form-field>
                </div>


                <div fxFlex="30">
                  <mat-form-field appearance="outline" class="example-full-width" class="w-90-p">
                      <mat-label>End Ip</mat-label>
                    <input matInput formControlName= "end_ip" (blur)="checkStartEndIP($event.target.value,i,'end_ip')">
                  <mat-error *ngIf="(companyForm.get('company_ip_addresses').at(i).controls.end_ip.touched  || companyForm.get('company_ip_addresses').at(i).controls.end_ip.untouched) && companyForm.get('company_ip_addresses').at(i).controls.start_ip.valid && !companyForm.get('company_ip_addresses').at(i).controls.end_ip.value ">
                      Required End IP
                  </mat-error>
                  <mat-error *ngIf="((companyForm.get('company_ip_addresses').at(i).controls.end_ip.dirty || companyForm.get('company_ip_addresses').at(i).controls.end_ip.touched) && companyForm.get('company_ip_addresses').at(i).controls.end_ip.errors?.pattern)">
                    Invalid End IP
                  </mat-error>     
                </mat-form-field>  

                </div>


                <div fxFlex="30">
                  <div *ngIf="isFirst;then addfield else delete">
                  </div>
                  <ng-template #addfield>
                    <button mat-icon-button class="text-center" (click)="addItem()">
                      <mat-icon class="font-weight-900">add</mat-icon>
                    </button>
                  </ng-template>
                  <ng-template #delete>
                    <button mat-icon-button class="text-center" (click)="deletefield(i)">
                      <mat-icon class="font-weight-900 red-500-fg">delete</mat-icon>
                    </button>
                  </ng-template>
                </div>
                <ng-template #addfield>
                  <button mat-icon-button class="text-center" (click)="addItem()">
                    <mat-icon class="font-weight-900">add</mat-icon>
                  </button>
                </ng-template>
                <ng-template #delete>
                  <button mat-icon-button class="text-center" (click)="deletefield(i)">
                    <mat-icon class="font-weight-900 red-500-fg">delete</mat-icon>
                  </button>
                </ng-template>
              </div>
            </ng-container>
            </div>
          </div>
        </div>
      <ng-container formGroupName="login">
        <div *ngSwitchCase="'login'">
          <div fxLayout="row wrap">
            <div fxFlex="50" fxFlexOffset="25" class="px-48">
              <div class="text-center">
                <h2 class="font-size-26 text-bold">Hello</h2>
                <p class="font-size-14">Please login to your account</p>
              </div>
              <div>
                <mat-form-field appearance="outline" class="w-100-p">
                    <mat-label>email</mat-label>
                  <input matInput formControlName="login_email" [errorStateMatcher]="matcher">
                  <mat-icon matSuffix class="grey-700-fg">email</mat-icon>
                </mat-form-field>

                <mat-form-field appearance="outline" class="w-100-p">
                    <mat-label>Password</mat-label>
                  <input matInput formControlName="login_password" [type]="hide ? 'password' : 'text'">
                  <mat-icon matSuffix (click)="hide = !hide" class="grey-700-fg cursor-pointer">{{hide ? 'visibility_off'
                    :'visibility'}}</mat-icon>
                </mat-form-field>
                <div class="text-right cursor-pointer">
                  <a>forgot password? </a>
                </div>
                <div class="text-center mt-12">
                  <button mat-flat-button color="primary"
                    class="px-60 py-4 font-size-14 text-bold btn-rounded">Login</button>

                </div>

              </div>


              <div class="mt-60 text-center">
                <button mat-flat-button class="font-size-14 text-bold grey-400-bg mr-20 px-12"
                  (click)="urlDialog()">URL</button>
                <button mat-flat-button class="font-size-14 text-bold grey-400-bg" (click)="embedDialog()">Embed
                  Code</button>
              </div>
            </div>
          </div>
        </div>
      </ng-container>

    </form>

component.ts:

ip_addresses_arr: any;

this.companyForm = this.fb.group({
id: [],
company_details: this.fb.group({
  name: [],
  display_name: []
}),
company_settings: this.fb.group({
  id: [],
  website: [],
  fiscal_start: [],
  contact_number: [],
  fax: [],
  description: [],
  company_logo: [],
  social_media_logo_path: [],
  logo_path: [],
  currency: [],
  date_format: [],
  timezone: [],
  timeformat: [],
  resume_inbox_non_user: [],
  resume_inbox_contact_owner: [''],
  logo: [''],
  original_logo: [''],
  social_media_logo: ['']
}),
billing: this.fb.group({
  id: [],
  street: [],
  city: [],
  country: [],
  state: [],
  zip: []
}),
company_ip_addresses: this.fb.array([this.fb.group({
  id: 0,
  created_by: 0,
  modified_by: 0,
  start_ip: new FormControl('', Validators.pattern("^([0-9]{1,3})[.]([0-9]{1,3})[.]([0-9]{1,3})[.]([0-9]{1,3})$")),
  end_ip: new FormControl('', Validators.pattern("^([0-9]{1,3})[.]([0-9]{1,3})[.]([0-9]{1,3})[.]([0-9]{1,3})$"))
})]),
  applicable_to: this.buildUserTypes(),
    login: this.fb.group({
    login_email: [''],
    login_password: ['']
  }),
});

My form validation on submitting the form is:

saveCompanyInfo() {
  this.ip_addresses_arr = this.companyForm.get('company_ip_addresses') as FormArray;
 this.ip_addresses_arr.controls.forEach(eachfield => {
  console.log("start_ip value - ",eachfield.value['start_ip']);
  console.log("end_ip value - ",eachfield.value['end_ip']);
  if( eachfield.value['start_ip'] != "" && (eachfield.value['end_ip'] == null || eachfield.value['end_ip'] == "" ) ){
    console.log("coming inside end_ip is empty");
    eachfield.get('end_ip').setValidators([Validators.required]);
    eachfield.get('end_ip').updateValueAndValidity();
    eachfield.get('end_ip').markAsTouched();
    console.log("eachfield.get('end_ip') after setErrors - ",eachfield.get('end_ip'));
  }else if( eachfield.value['end_ip'] != "" && (eachfield.value['start_ip'] == null || eachfield.value['start_ip'] == "" ) ){
    console.log("coming inside start_ip is empty");
    eachfield.get('start_ip').setValidators([Validators.required]);
    eachfield.get('start_ip').updateValueAndValidity();
    eachfield.get('start_ip').markAsTouched();
    console.log("eachfield.get('start_ip') after setErrors - ",eachfield.get('start_ip'));
  }else{
    console.log("coming to else");
    eachfield.get('start_ip').clearValidators();
    eachfield.get('end_ip').clearValidators();
  }
 });

 console.log("this.companyForm.valid - ",this.companyForm.valid);

  if (this.companyForm.valid) {
    -----------------
    -----------------
  }
}

My browser console is:

eachfield.get('start_ip') after setErrors
FormControl {...}
 asyncValidator: null
 dirty: (...)
 disabled: (...)
 enabled: (...)
 errors: {required: true}
 --------

 this.companyForm.valid -  true

As you can see above my formcontrol set to "required: true" and also the my form.valid condition is setting to 'true' and the form is getting submitted automatically after clicking on submit button. Any help would be appreciated. Thanks.