I've been struggle for a couple day for solve the Levenstein. I tried this code from https://stackblitz.com/edit/angular-aqkcyc?file=app%2Fapp.component.ts
** I can't use fast-levenstein library in the website that I post on top of this comment. So I change to leven library.****
This is my app.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Observable } from 'rxjs';
import {map} from 'rxjs/operators';
import leven from 'leven';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Distanceproject';
  form!: FormGroup;
  score$!: Observable<number>;
  
  constructor(private fb: FormBuilder) { }
  ngOnInit() {
    this.initForm();
    this.initScore();
  }
  private initForm() {
    this.form = this.fb.group({
      str1: '',
      str2: '',
    });
  }
  private initScore() {
    this.score$ = this.form
      .valueChanges
      .pipe(
        map(({str1, str2}) => leven(str1,str2))
      );
  }
}
This is my app.component.html
   <h1>{{title}}</h1>
<form [formGroup]="form">
  <textarea type="text" formControlName="str1"></textarea>
  <br>
  <br>
  
  <textarea type="text" formControlName="str2" ></textarea>
</form>
<br>
<div>
  Levenshtein score: {{ score$ | async }} 
</div>
However.. When I type ng serve --open. It starts catching the error " error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'. ( Angular)".
 
    