I have a quiz app made with Ionic and Angular 4. User have to submit answer, I check if it's the same as the good answer or not.
I would like to check string correspondence, and handle event according to the correspondence between good answer and user answer.
In Exemple :
If the answer is 'azerty', and he wrote 'mzerty', I would like to allow him to continue.
If user wrote 'qwerty', or something too different, he failes.
A simple demo with Levenstein distance would be like that:
Typescript
import { Component, OnInit } from '#angular/core';
import { FormBuilder, FormGroup } from '#angular/forms';
import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators';
import levenshtein from 'fast-levenshtein';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
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}) => levenshtein.get(str1, str2))
);
}
}
HTML
<form [formGroup]="form">
<input type="text" formControlName="str1">
<br>
<br>
<input type="text" formControlName="str2">
</form>
<br>
<div>
Levenshtein score: {{ score$ | async }}
</div>
Stackblitz live demo: https://stackblitz.com/edit/angular-usydyu
You can simply create a method which will return you how many characters are matched. so on basis of matched characters and the length of string you can decide weather its a good answer or not.
function checkEq(str1, str2){
var arr1 = str1.split('');
var arr2 = str2.split('');
var counter = 0;
for(var i=0;i<arr1.length;i++){
if(arr1[i]==arr2[i]){
counter++;
}
}
return counter;
}
Related
thank You for reading. I'm a Angular beginner and have an first problem I can't solve. I read many, many posts without success, sorry.
My seach form is working fine if I get the search phrase in one component and process it in another component. The *ngFor loop gives back the right result-array in dom and console: searchCustomer(phrase).
The exactly same search function works not, if I include a header component with another search form - although I get the right results via console(!). I included the header via app-header in component.html.
Why contains the array "results" the right items but the dom isn't showing it? This is my code:
search.component.html:
<form #f = "ngForm" action="verification" method="get">
<input [(ngModel)] = "phrase" type="text" name="phrase">
<button type="button" (click)="searchCustomer()">Search</button>
</form>
search.component.ts:
searchCustomer() {
this.dataService.setPhrase(this.phrase); // store phrase
this.router.navigate(['/results']); // navigate
}
result.component.html:
<app-header></app-header>
<div class="col-md-6" *ngFor="let vs of results">
...
</div>
result.component.ts:
import { ChangeDetectorRef, Component, OnInit } from '#angular/core';
// add ApiService
import { ApiService } from '../~services/api.service'; // ApiService
// add customers Model
import { Customer } from '../~interfaces/customers';
// DataService
import { DataService } from "../~services/data.service";
#Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.css'],
})
export class ResultComponent implements OnInit {
// add array:
results: Customer[];
// add variable
phrase: string;
constructor(
private apiService: ApiService,
private dataService: DataService,
private cdr: ChangeDetectorRef
) {
}
ngOnInit() {
}
searchCustomer(phrase) {
// search
this.apiService.searchCustomer(phrase).subscribe((result:Customer[]) => {
this.results = result;
console.log(this.results);
this.cdr.detectChanges();
}
)
}
}
header.component.html:
<form #f = "ngForm">
<input type="text" [(ngModel)] = "phrase" type="text" value="{{phrase}}">
<button type="button" (click)="searchCustomer()">Search</button>
</form>
header.component.html:
searchCustomer(){
this.dataService.setPhrase(this.phrase);
this.resultComponent.searchCustomer(this.phrase);
}
If I start the search from Header, I can see the correct array "results" in Console, but not in dom. There is no refreshing.
Thank you for eye-opening,
Matthias
This was the solution in result.component.ts
responsePage$: Observable<ResponsePage>;
ngOnInit() {
this.apiService.searchCustomer(phrase).subscribe((result:Customer[]) => {
this.results = result;
this.searchCustomer(phrase);
});}
searchCustomer(phrase) {
this.responsePage$=this.apiService.customers(phrase);
}
I have this produced string:
string str = [{"id":1,"name":"Angular"},{"id":2,"name":"SpringBoot"}]
I'd like to convert it to an array of Objects to have that:
listexps: Expertise[];
listexps = [{"id":1,"name":"Angular"},{"id":2,"name":"SpringBoot"}];
And Expertise class is
export class Expertise
{
id: number;
name: string;
}
I tried that:
let array = str .replace('[{','').replace('}]','').split("},{").map(String);
but that didn't resolve my problem, I got:
"id":1,"name":"Angular","id":2,"name":"SpringBoot"
instead of
[{"id":1,"name":"Angular"},{"id":2,"name":"SpringBoot"}];
Have you please any idea about solving that ?.
Big thanks.
What you need is JSON.parse; it converts string to an object;
relevant ts:
import { Component } from '#angular/core';
export class Expertise {
id: number;
name: string;
}
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
strIntoObj: Expertise[];
constructor() {
let str: string = '[{"id":1,"name":"Angular"},{"id":2,"name":"SpringBoot"}]';
this.strIntoObj = JSON.parse(str);
console.log(this.strIntoObj);
}
}
complete working stackblitz here
I have an array of objects in a component. which I will iterate in the template.
app.component.ts
import {Component, OnInit} from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'sample-app';
classesData = [];
constructor() {
}
ngOnInit() {
this.classesData = [
{title: 'Hello0'}, {title: 'Hello1'}, {title: 'Hello2'}
];
}
duplicate() {
const newData = JSON.parse(JSON.stringify(this.classesData[1]));
newData.title += 'Copy';
this.classesData.splice(1, 0, newData);
}
}
app.template.html
<form #testingFrom="ngForm">
<p>{{classesData | json}}</p>
<div *ngFor="let classData of classesData; let i=index">
<input [(ngModel)]="classData.title" name="{{'title-' + i}}" type="text">
</div>
<button (click)="duplicate()">Duplicate</button>
</form>
My aim is when a user clicks on the duplicate button I simply add a new element at index 1 in an array. My initial state looks like (before user clicks)
And my state after a user clicks duplicate button
In the image above at 3rd input field, we are getting Hello1Copy instead of Hello1.
I completely suspect that this behavior is happening because of conflict in the name attribute value. For this case only, if you splice the newItem at first location, it only adds that's variable and other DOM's doesn't re-render. For cross verification you can try replacing input element with simple binding like {{classData.title}} and everything works fine.
This behavior can easily be solved by not conflicting name attribute value for all time. What that means is to assign a unique id variable with each collection item and use it.
this.classesData = [
{ id: 1, title: 'Hello0' },
{ id: 2, title: 'Hello1' },
{ id: 3, title: 'Hello2' }
];
duplicate() {
const newData = JSON.parse(JSON.stringify(this.classesData[1]));
newData.title += 'Copy';
newData.id = Date.now()
this.classesData.splice(1, 0, newData);
}
Template
<div *ngFor="let classData of classesData;let i=index">
<input [(ngModel)]="classData.title" [name]="'title_'+classData.id" type="text">
</div>
Stackblitz
You can also verify the same by removing name attribute from each input field. But that would not suffice, it would throw
ERROR Error: If ngModel is used within a form tag, either the name
attribute must be set or the form control must be defined as
'standalone' in ngModelOptions.
So add [ngModelOptions]="{standalone: true}" on each input field to make input working without name attribute. As suggested in another answer by #briosheje, you can also re-enforce rendering using trackBy.
PS: I'm investigating why this works differently when there is a combination of name and input, I suspect about form API wiring with input element. I'll update the answer as soon as I get something.
The problem is that you are using a form. Because you're using a form, you need to specify how angular should track the changes for your form items, if you're planning to alter the existing source. You can do such using the trackBy pipe:
<form #testingFrom="ngForm">
<p>{{classesData | json}}</p>
<div *ngFor="let classData of classesData; let i=index; trackBy: trackByFn">
<input [(ngModel)]="classData.title" [name]="'title-' + i" type="text">
</div>
<button (click)="duplicate()">Duplicate</button>
</form>
Typescript relevant part:
trackByFn(index: any) {
return index;
}
Please note that adding elements to the collection will work in your original example.
Working stackblitz: https://stackblitz.com/edit/angular-uabuya
Make another variable and iterate that variable to crate inputs
import { Component,OnInit } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
title = 'sample-app';
originalData=[];
classesData = [];
constructor() {
}
ngOnInit() {
this.classesData = [
{title: 'Hello0'}, {title: 'Hello1'}, {title: 'Hello2'}
];
this.originalData=[...this.classesData]; // changed here
}
duplicate() {
const newData = JSON.parse(JSON.stringify(this.classesData[1]));
newData.title += 'Copy';
this.classesData.splice(1, 0, newData);
}
}
Working Demo
You can solve your issue using "trackBy" feature. Please see below code sample.
app.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
title = 'sample-app';
classesData = [];
constructor() {}
ngOnInit() {
this.classesData = [
{ title: 'Hello0' },
{ title: 'Hello1' },
{ title: 'Hello2' }
];
}
duplicate() {
const newData = JSON.parse(JSON.stringify(this.classesData[1]));
newData.title += 'Copy';
this.classesData.splice(1, 0, newData);
}
trackByIndex(index: number, obj: any): any {
return index;
}
}
app.component.html
<form>
<p>{{classesData | json}}</p>
<div *ngFor="let classData of classesData; let i=index;trackBy:trackByIndex;">
<input [(ngModel)]="classesData[i].title" name="{{'title-' + i}}" type="text" />
</div>
<button (click)="duplicate()">Duplicate</button>
</form>
Please let me know if this solution works for you!
I have a reactive form that is basically this.
ngOnInit() {
this.myForm = this.fb.group({
sections: this.fb.array([])
});
}
addSection(){
let section = <FormArray>this.myForm.controls.sections;
section.push(this.fb.group({
name: '',
items: this.fb.array([]),
percentage: '',
}));
}
addSection() is a function that adds an element to my sections FormArray when i click something that's on my template
I sum up all percentages from every section inside the sections formArray and validate that it isn't bigger than 1 (I assume user is typing floating points in those specific inputs). Finally i want to disable the submit button at the end of the form if the sum if bigger than 1.
I tried the answer from this question but didn't work cause https://stackoverflow.com/a/48706808/8579973 cause it was meant for a group of object thats all the same. I need it to validate just the "percentage" element from every group that is made.
I also tried to store the sum in local storage, but I don't want any extra button that triggers that procedure.
Thanks for your answers,
Regards
Like this? Stackblitz: https://stackblitz.com/edit/angular-vdgdv2
import { Component} from '#angular/core';
import {FormBuilder, FormControl, FormArray, FormGroup, FormGroupDirective, NgForm, ValidatorFn, Validators} from '#angular/forms';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent{
myForm: FormGroup;
constructor(private fb: FormBuilder){
this.myForm = this.fb.group({
sections: this.fb.array([], CustomValidator.checkPercentageSum)
});
this.addSection();
}
addSection(){
let section = this.myForm.get('sections') as FormArray;
section.push(this.fb.group({
percentage: 0.2,
}));
section.push(this.fb.group({
percentage: 0.3,
}));
section.push(this.fb.group({
percentage: 1,
}));
console.log(this.myForm.valid , this.myForm.get('sections').errors);
// Output: false {Invalid: true}
}
}
//Custom Validator
export class CustomValidator {
static checkPercentageSum(sections: FormArray): ValidationResult {
if (sections) {
let sumOfPercentages: number = 0;
sections['controls'].forEach((sectionItem: FormGroup) => {
sumOfPercentages = sectionItem['controls'].percentage.value + sumOfPercentages;
});
if (sumOfPercentages > 1) {
return {"Invalid": true};
}
}
return null;
}
}
export interface ValidationResult {
[key: string]: boolean;
}
Consider the following component
import {Component} from 'angular2/core'
#Component({
selector: 'my-app',
providers: [],
template: `
<div>
<h3>Input with two decimals</h3>
<input type="text"
[value]="formattedN"
(change)="nChanged($event.target.value)"/>
</div>
`,
directives: []
})
export class App {
private n: number = 0;
private formattedN: string = "0.00"
public nChanged(value) {
this.n = parseFloat(value);
this.formattedN = this.n.toFixed(2);
}
}
The input should always be a number with two decimals. That is however not always the case. Try removing the last zero, the field is not changed to 0.00 which is what I want. I understand it doesn't work because the formattedN value is not updated, which means that the property binding is not updated, hence the value of the input is not updated.
Run the example in plunker: http://plnkr.co/edit/Vyi4RKladslrdZslZQhm
Does anyone have a nice solution for this problem?
Is this Answer what you're trying to accomplish????
//our root app component
import {Component} from 'angular2/core'
#Component({
selector: 'my-app',
providers: [],
template: `
<div>
<input type="text" [(ngModel)]="formattedN" (change)="nChanged($event.target.value)"/>
</div>
`,
directives: []
})
export class App {
private n: number = 0;
private formattedN: string = "0.00"
constructor() {
this.name = 'Angular2'
}
public nChanged(value) {
console.log(value);
this.n = parseFloat(value);
console.log(this.n);
this.formattedN = this.n.toFixed(2)
console.log(this.formattedN);
}
}