Html Angular—如何将类与窗体绑定在一起

我已经设置了一些表单来过滤我的数据表。为了做到这一点，我需要一个在我写表单时填充的类。我已经通过添加另一个组件FormComponent实现了这一点：

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['../sequences.component.css']
})

export class FormComponent{

  sequenceId!: string;
  asOrigin!: number;
  prefix!: string;
  suffix!: number;
  collectorIp!: string;
  collectorAsn!: string;
  durationGreater!: number;
  durationSmaller!: number;
  startDate!: Date;
  endDate!: Date;
  updates!: number;
  withdraws!: number;
  announces!: number;

...
}

下面是我的html文档中表单字段的一个示例，您可以看到我使用了ng模型来实现这一点：

<mat-form-field appearance="fill" class="IDFilter">
      <mat-label>Sequence ID:</mat-label>
        <input matInput type="text" formControlName="sequenceId" [(ngModel)] = "sequenceId">
        <mat-error *ngIf="formGroup.controls['sequenceId'].hasError('pattern')">
          Enter a valid sequence ID
      </mat-error>
    </mat-form-field>