message: empty field fix
diff: <td>
  <mdl-textfield
  *ngIf="protocol === 'ICMP'"
  - [class.is-invalid]="icmpTypeField.invalid && !icmpTypeField.pristine"
  + [class.is-invalid]="icmpType && !icmpTypeField.pristine && icmpTypeField.invalid"
  name="icmpType"
  type="number"
  minValue="0"
  ></mdl-textfield>
  <mdl-textfield
  *ngIf="protocol !== 'ICMP'"
  - [class.is-invalid]="startPortField.invalid && !startPortField.pristine"
  + [class.is-invalid]="startPort && !startPortField.pristine && startPortField.invalid"
  name="startPort"
  type="number"
  minValue="0"
  </td>
  <td>
  <mdl-textfield
  + [class.is-invalid]="icmpCode && !icmpCodeField.pristine && icmpCodeField.invalid"
  *ngIf="protocol === 'ICMP'"
  name="icmpCode"
  type="number"
  error-msg="{{ 'ENTER_VALID_CODE' | translate }}"
  required
  [(ngModel)]="icmpCode"
  + #icmpCodeField="ngModel"
  ></mdl-textfield>
  <mdl-textfield
  *ngIf="protocol !== 'ICMP'"
  - [class.is-invalid]="endPortField.invalid && !endPortField.pristine"
  + [class.is-invalid]="endPort && !endPortField.pristine && endPortField.invalid"
  name="endPort"
  type="number"
  minValue="0"
  <td>
  <mdl-textfield
  class="cidr"
  - [class.is-invalid]="cidrField.invalid && !cidrField.pristine"
  + [class.is-invalid]="cidr && !cidrField.pristine && cidrField.invalid"
  name="cidr"
  type="text"
  pattern="^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])(\/([0-9]|[1-2][0-9]|3[0-2]))$"
  