0

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

R. Richards
  • 24,603
  • 10
  • 64
  • 64
  • The error is because Angular cannot recognize what `formGroup` is? For it to recognize it, you should add `ReactiveFormsModule` within app.module.ts `imports` array. – Siddhant Jan 08 '22 at 13:56
  • I tried to put ReactiveFormsModule in app.module.ts imports. In private initform() starts catching error at "this.form". – Siripaiboon Flame Janpetch Jan 08 '22 at 14:30

0 Answers0