Angular 4 : How to use pattern in an input list

I have a form html and the button submit becomes enable only when the form is valid. That is, when a particular input contains the recommended pattern. I need to use this pattern in an inputlist. It works with a simple input but with the input list, the list disappears :

<input list="refNumbers" pattern="[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]" formControlName="refNb" type="text" name="article" maxlength="8" size="15" required title="8 characters" />

<datalist id="refNumbers">
     <option *ngFor="let ref of listOfArticles">{{ref.refNumber.input}}</option>
</datalist>

Otherwise, how can i disable button submit if the ref number selected is not in the datalist ? Because it seems that the valid condition on the form is not enough :

<button type="submit" [disabled]="!myFormGroup.valid" >Valider</button>

component.ts :

import { Component, OnInit } from '@angular/core';
import 'rxjs/add/operator/switchMap';


import { ManagementArbologistiqueService } from "../management-arbologistique.service";

import { ActivatedRoute, Params } from '@angular/router';
import { FormGroup, FormControl, FormBuilder, FormArray, Validators } from '@angular/forms';
@Component({
  selector: 'app-arbologistique',
  templateUrl: './arbologistique.component.html',
  styleUrls: ['./arbologistique.component.css']
})
export class ArbologistiqueComponent implements OnInit {

  private reponseTest: String;
  private listOfArticles :Array<Object>
  private pathDownload: any;
  private myFormGroup: FormGroup;
  fileToUpload: File = null;
  private buttonSubmitEnabled: boolean = false;

  constructor(public fb: FormBuilder, private managementArbo: ManagementArbologistiqueService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.myFormGroup = this.fb.group({
      itemRows: this.fb.array([this.initItemRows()])
    })

    this.myFormGroup.valueChanges.subscribe(x => this.buttonSubmitEnabled = false);
    this.getListBdd();
      }


  initItemRows() {
    return this.fb.group({
      ... //other fields
      refNb: ['',Validators.required],
      ... //other fields

    })
  }

  addRow(index: number) {
    console.log("functionAddRow called");
    const control = <FormArray>this.myFormGroup.controls['itemRows'];
    control.insert(index, this.initItemRows());

  }

  deleteRow(index: number) {
    console.log("functionDeleteRow called");
    const control = <FormArray>this.myFormGroup.controls['itemRows'];
    control.removeAt(index);
  }

  sendForm() {
    this.buttonSubmitEnabled=true;
    console.log("functionExportCalled");
    this.route.params.subscribe((params: Params) => {
      let subroute = "exportation";
      this.managementArbo.postProducts(subroute, JSON.stringify(this.myFormGroup.value))
        .subscribe(
          res => { this.reponseTest = res; console.log('reponse:' + res); }

          ,
          err => console.log(err),
          () => console.log('getProducts done'));

    });
  }

  getListBdd() {
    this.route.params.subscribe((params: Params) => {
      let subroute = "getRefNumber";
      this.managementArbo.getProducts(subroute)
        .subscribe(
          res => { this.listOfArticles = res; console.log('reponse:' + res); }

          ,
          err => console.log(err),
          () => console.log('getProducts done'));
    });
  }

  get refNb() {
    return this.myFormGroup.get('itemRows.refNb');
} 
}