Develop Reference

How to show preselected boolean value with Primeng InputSwitch in form control?

I am struggling with p-inputSwitch in angular.
I have an edit button in another component. Once I click it, a p-dialog pops up and it has the form below.
When the dialog is displayed, I want to make the preselected status on p-inputSwitch stay. It is inside the form control. Here is the code I made:
<home.component.html>
<form [formGroup]="myForm" (submit)="onSubmitForm()">
<div>
<p-inputSwitch
formControlName="ShowMe"
(onChange) = "test($event)"
></p-inputSwitch>
</div>
</form>
<home.component.ts>
export class HomeComponent implements OnInit {
checked: boolean;
myForm = this.fb.group({
ShowMe: [null, Validators.required],
});
constructor(
private fb: UntypedFormBuilder
) {}
ngOnInit() {
this.test();
}
test(e: any) {
this.checked = e.checked;
console.log(this.checked);
}
}
On the server side, I can see the ShowMe value is stored as either 0 or 1.
If it is 0, the checked should be false and the p-inputSwitch
should be off.
If it is 1, the checked should be true and the
p-inputSwitch should be on.
How can I see the preselected status on the input switch? Please help me out with any example code.

I fixed your code, there was a few bugs. Following this code, I did not have p-inputSwitch for my local, but I made a checkbox example over there which is the same logic:
TS ->
import { Component, VERSION } from '#angular/core';
import { UntypedFormBuilder, Validators } from '#angular/forms';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
constructor(private fb: UntypedFormBuilder) {}
checked: boolean = true;
myForm = this.fb.group({
ShowMe: [false, Validators.required],
});
ngOnInit() {
this.myForm.patchValue({ ShowMe: false });
}
test(e?: any) {
this.checked = e.checked;
console.log(this.checked);
}
onSubmitForm() {
}
}
HTML ->
<form [formGroup]="myForm" (submit)="onSubmitForm()">
<div>
<input
#checkbox
type="checkbox"
formControlName="ShowMe"
(change)="test(checkbox)"
/>
</div>
</form>
https://stackblitz.com/edit/angular-ivy-61najh?file=src/app/app.component.html
Good luck.

angular form is not detecting the value changing

I don't know why the form is not working!
the input does not change the values in the form.
and the valueChanges is not detecting anything. any help?
applied on stackblitz:
https://stackblitz.com/edit/angular-ivy-w68v69?file=src/app/app.component.ts
import { Component, VERSION } from "#angular/core";
import { FormControl, FormGroup, Validators } from "#angular/forms";
#Component({
selector: "my-app",
template: `
<form [formGroup]="form">
<input
FormControlName="patientName"
placeholder="Enter Patient Name ..."
/>
</form>
`,
styleUrls: ["./app.component.css"]
})
export class AppComponent {
form: FormGroup;
ngOnInit() {
this.form = new FormGroup({
patientName: new FormControl("")
});
this.form.get("patientName").valueChanges.subscribe(x => console.log(x));
this.form.valueChanges.subscribe(next => {
console.log("valueChanges didtted");
console.log(next);
});
console.log("form created");
}
}

The property FormControlName in the HTML part should have the 'F' in lowercase : formControlName="patientName".
It you correct this, it works : https://stackblitz.com/edit/angular-ivy-cjntrr?file=src/app/app.component.ts

I am getting the following error: ERROR TypeError: Cannot read property 'invalid' of undefined

I have tried other solutions such as fixing form references but that didn't help me. Here is my form for a login
<form [formGroup]="longinForm" (ngSubmit)="onSubmit()">
<h1>Login Form</h1>
<div class="form-group" >
<label for="name" >Username</label>
<input type="text" name ="user" [(ngModel)]="loginuserdata.user"
#user="ngModel"
class="form-control" required >
<div *ngIf="submitted">
<div [hidden]="user.valid || user.pristine" class="alert alert-danger">
Username is required
</div>
</div>
</div>
<div class="form-group" >
<label for="pass" >Password</label>
<input type="text" name="pass" [(ngModel)]="loginuserdata.pass" #pass="ngModel"
class="form-control" required >
<div *ngIf="submitted">
<div [hidden]="pass.valid || pass.pristine" class="alert alert-danger">
Password is required
</div>
</div>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
also here is my login component
import { Component, OnInit, ViewChild } from '#angular/core';
import { NgForm, FormGroup } from '#angular/forms';
import { Router } from '#angular/router';
import { LoginService } from './login.service';
import { ILoginData } from './login-data';
#Component({
selector: 'app-loginform',
templateUrl: './loginform.component.html',
styleUrls: ['./loginform.component.css']
})
export class LoginformComponent implements OnInit {
loginForm:FormGroup;
loginuserdata : any[] = [];
error:string;
submitted=false;
constructor(private route: Router,private service:LoginService) { }
get f(){return this.loginForm.controls;}
ngOnInit() {
this.onSubmit();
}
onSubmit(){
if(this.loginForm.invalid){return;}//form invalid stop here
//form is valid do something
this.submitted=true;
if(this.f.user.value == "Admin" && this.f.pass.value == "Apassword"){
this.service.getAdmin()
.subscribe(data => this.loginuserdata = data)
this.route.navigateByUrl('admin');
err => this.error = err;
console.log(this.error);
}
}
}
If you guys need to see any other pieces of my code let me know please help me out I tried something similar to an answer solved to this but it didn't work for me.

You need to build the form controls, you have it defined but you need something like the following. You need to initialise the form group.
import { NgForm, FormGroup, FormBuilder } from '#angular/forms';
//Be sure to import formBuilder and inject through constructor. This will allow you
//to manage how you will build the form and add validation.
//Its a helper class provided by Angular to help us explicitly declare forms.
constructor( private formBuilder: FormBuilder ){}
public ngOnInit(): void {
this.loginForm = this.formBuilder.group({
username: ['', Validators.required],
password: ['', Validators.required]
});
This is where you can define the controls and the validators for the form group. (This example would just dictate that there needs to be a value for each in order to be valid. This should be built in the ngOnInit.
Then in your template you can remove the [(ngModel)] and make it look like the following. The value for the input will then be held within the control when you need to access it.
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<input type="text" name ="user" [formControlName]="'username'"
class="form-control" required>
<form>
Above would serve as an example for the login username / email.
Also as mentioned in the comments you have a typo in the form in the HTML.
This should then be valid when you are trying to access the valid and invalid properties of the from group. Comment if you have any trouble.
Here is the Angular documentation for reactive forms.

How about you do this.
ngAfterViewInit() {
this.onSubmit()
}
I think it was not yet defined at ngOninit.
Check Life Cycle.

Angular 5 FormBuilder errors undefined when invalid input

[As a Newbie tried to put this into plnkr, but couldn't; problems getting #angular/forms added to json.]
Purpose: to iron out things I need to know to do all my work in FormBuilder
HTML:
<input type="text"
formControlName="bucket"
value="A"
[(ngModel)]="AllData.bucket" />
// added to button to test: [disabled]="this.myTestForm.invalid || this.myTestForm.pristine"
<div><button
type="submit">submit</button></div>
</form>
<div *ngIf="result.length > 0 ">{{result}}</div>
<div *ngIf="myTestForm.errors === true ">ERRORS FOUND</div>
Running the app: shows the formbuilder in the ts below initializes the input field correctly and if I add the [disabled] expression commented above it disables button correctly.
Here's the ts:
import {Component, OnInit} from '#angular/core';
import {Validators, FormBuilder, FormGroup} from '#angular/forms';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
myTestForm: FormGroup;
result: string;
AllData = { //// wired to ngModel
bucket: '12'
}
constructor(private fb: FormBuilder) {
this.result = '';
}
ngOnInit() {
this.myTestForm = this.fb.group({
bucket: ['starting value', [Validators.required, Validators.minLength(5)]]
<-- ngModel bucket above overrides this init value as expected -->
});
}
onSubmit(value: any) { // ways to show results
this.result = this.AllData.bucket;
// OR //
this.result = this.myTestForm.controls['bucket'].value;
// OR //
this.result = this.myTestForm.get('bucket').value;
}
}
The app inits with '12' in the input field as expected. No matter what I put into the textbox before pressing the submit button, devTools always shows the myTestForm 'error' property as undefined.
I'm expected errors to have some sort of string(s) based on the type of error(s) that is occurring.
Further, I scoured the web for ways to capture invalid fields as soon as the error occurs (of course for !pristine fields), but I couldn't get anything to work.
Any help will be much appreciated.
Thanks in advance,
Chuck

I have created a small demo to provide a suggestion on your approach
Do not use [(ngModel)] when your are using reactive forms approach, as ngModel will take precedence over the formControl and set its value to the control irrespective of formcontrol's value, that you have initialized.
<form [formGroup]="myTestForm" >
<input type="text"
formControlName="bucket"
value="A" />
<div><button
[disabled]="myTestForm.invalid || myTestForm.pristine"
type="submit" >submit</button></div>
</form>
To check form errors, use hasError() on controls
<div *ngIf="myTestForm.get('bucket').hasError('required')">Input is required</div>
<div *ngIf="myTestForm.get('bucket').hasError('minlength')">Min length should be 5</div>

How to check if two strings are almost equal with Angular

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;
}