可以使用Validator发送空表单

Question

我创建了以下表单

<div class="ui raised segment">
  <h2 class="ui header">Demo Form: Sku</h2>
  <form [formGroup]="myForm"
        (ngSubmit)="onSubmit(myForm.value)" class="ui form"
        [class.error]="!myForm.valid && (myForm.dirty || myForm.touched)">
    <div class="field"
         [class.error]="!myForm.valid && (myForm.dirty || myForm.touched)">
      Forms in Angular 141
      <label for="skuInput">SKU</label>
      <input type="text" id="skuInput" placeholder="SKU" name="sku" [formControl]="myForm.controls['sku']">

      <!-- Error Message -->
      <div *ngIf="!myForm.controls['sku'].valid"
           class="ui error message">SKU is invalid</div>
      <div *ngIf="myForm.controls['sku'].hasError('required')"
           class="ui error message">SKU is required</div>
      <!-- End Error Message-->

    </div>

    <button type="submit" class="ui button">Submit</button>
  </form>

</div>

主要问题是即使是空的我也可以发送表格。一旦页面加载，如果我不关注输入（如果我只做一次它的工作），我只需单击提交按钮，表单就会发送。

我正在使用表单构建器创建表单：

  myForm : FormGroup;
  private sku: AbstractControl;

  constructor( fb:FormBuilder) {

    this.myForm = fb.group({
      sku : ['' , Validators.required]
    });

    this.sku = this.myForm.controls['sku'];

    this.sku.valueChanges.subscribe(
      (value : String) => {
        console.log('value has change to : ', value);
      }
    )
  }

  ngOnInit() {
  }

  onSubmit(value : string ) {
    console.log(`has enviado :` , value);
  }

我该如何解决这个问题？

PS：我知道我可以使用reg表达式修复它，但是我认为所需的验证器不应该像这样工作。