Сообщение проверки не отображается с помощью NgForm в angular6

Question

Для проверки вводимого текстового поля для кода книги я использую ngForm следующим образом:

      <form name="form" (ngSubmit)="f.form.valid" #f="ngForm" validate>
    <div class="table-responsive bg-light rounded py-2 my-0">
      <table class="mx-4" cellpadding="5">
        <tbody>

  <td style="width: 12%;"> <strong>{{'code' |translate }}</strong></td>
             <td style="width: 20%;">
                <input name="code" type="text" class="form-control" [(ngModel)]="book.code" #code="ngModel" minlength="4" [ngClass]="{ 'is-invalid': f.submitted &&  code.invalid }"
                required id="coderat">
              <div *ngIf="f.submitted &&   code.invalid " class="text-danger">
                <div *ngIf=" code.errors.minlength">Le code doit avoir plus que 4 chiffres</div>
                <div *ngIf=" code.errors.required">Le code ne doit pas etre nul</div>
              </div>
            </td>

     <div class="text-center">
            <button type="submit" class="btn btn-sm btn-outline-success my-1 rounded float-right" (click)="saveBookModification(book,f)"
              prevent-double-submit><i class="fa fa-dot-circle-o"></i>Enregister</button>
          </div>
  </tbody>
      </table>
    </div>
  </form>

может кто-нибудь найти, что не так с этим кодом PS: я использовал таким же образом на другой странице, и проверка работала нормально.