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)".