Angular validations showing during the page load

We are working on the Angular 4 form and set some validations on the input field but the validation is showing when the page load's but we want the validation when the form is submitted or the field is not valid or filled.

Component.html

<div class="headerbutton-group row">
        <i class="fa fa-save header-buttons" tooltip ="Save" tabindex="1" (click)="onSave($event)"></i>
        <i class="fa fa-close header-buttons" tooltip ="Close"  (click)="onCancel($event)"></i>
</div>
<form [formGroup]="editForm" class="col-md-12 ">              
    <div class="form-group row">
       <div class="col-md-6 padding-Mini">                      
           <label class="col-md-12 col-form-label padding-bottom-Mini" for="txtName">Name</label>                       
               <div class="col-md-12">
                   <input type="text" id="txtName" name="txtName" class="form-control" placeholder="Name" formControlName="name" [class.is-invalid]="!editForm.controls.name.valid" [class.is-valid]="editForm.controls.name.valid" required>                          
                    <div class="invalid-feedback"  [style.visibility]= 
                     "editForm.controls.name.valid  ? 'hidden':'visible'"> Name is required</div>
                </div>
      </div>
      <div class="col-md-6 padding-Mini">
            <label class="col-md-12 col-form-label padding-bottom-Mini" for="txtName">Description</label>
                 <div class="col-md-12">
                     <input type="text" id="txtDescription" name="txtDescription" class="form-control" 
                       placeholder="Description" formControlName="description">
                        </div>
                  
      </div>
 </div>

</form>

Component.ts

@Component({
 selector: 'app-edit-form',
 templateUrl: './component.html'

})

export class LoginFormComponent implements OnInit {

constructor(fb:FormBuilder) {
  public editForm: FormGroup = new FormGroup({
        name        : new FormControl('', Validators.required),
        description : new FormControl(''),       
    });
}

  public onSave(e): void {         
        if (this.editForm.valid) {     
            e.preventDefault();
            this.save.emit(this.editForm.value);                  
        } else {           
            this.validateAllFormFields(this.editForm);
        }
    }

    public onCancel(e): void {       
        e.preventDefault();
        this.closeForm();     
    }

 private validateAllFormFields(formGroup: FormGroup) {
        Object.keys(formGroup.controls).forEach(field => {
            const control = formGroup.get(field);
            if (control instanceof FormControl) {
                control.markAsTouched({ onlySelf: true });
            } else if (control instanceof FormGroup) {
                this.validateAllFormFields(control);
            }
        });
    }
}
 // Tried this too editForm.controls.name.pristine

We don't know what we are missing. Kindly help us, with useful documents/ Demo's.