We Keep Coding

How to interact a front-end input via a webservice?

I have a page with an account number and a button to block the user's account. The webService interacts perfectly. When I click on the blocking button, the account is blocked!
Here is a small picture illustration.
I click on the button
The card displays that the account is blocked
Now, I want to add an input. The user can block the account only if he enters the password.
I added the input in HTML...
To test, the webService with the password, I run the cURL and it works.
{
"HEADER":{
"USER":"TOTO",
"CHANNEL":"B",
"LANGUAGE":"FR",
"SESSION":"",
"PASSWORD":"TOTO",
"NUMTRX":0,
"VERSION":"",
"LADACO": 0,
"LAHECO": 0,
"LADAPWD": 0,
"LAHEPWD": 0,
"IDENTIF": 0,
"AGDE": 0,
"TIERS": 0,
"EXPIRED": 0,
"EXPDATE": "0001-01-01",
"EXPDAYS": 0,
"CDEACC": ""
},
"CUSTOMER":{
"REFERENCE":"NA0052",
"ID":"",
"INTITULE1":"",
"INTITULE2":"",
"ACCESS":0,
"SERVICE":0,
"DEFAULTPTF":0
},
"MODE": "ETAT",
"PTF_IN": {
"ETAT": 4,
"MONTANT": 0
}
}
The return works
{"RETURNCODE":"OKK00","RETURNLIST":[]}
Thus, the webService works with the password. Now I need to integrate this into the front-end. But I don't understand how I have to integrate the password input?!
The page HTML is like this:
<form #formulaire="ngForm" (ngSubmit)="formulaire.form.valid && locking()">
<div class="row row-cols-3 pt-3">
<div class="col text-end">
<!-- Account number -->
<p for="account" class="form-label">Account number</p>
</div>
<div class="col-4">
<label class="fw-bold">{{ ((currentPortfolio$ | async)?.DEPO | accountDash) }} ({{
((currentPortfolio$ | async)?.NO_PTF) }})</label>
</div>
</div>
<div class="row row-cols-3 pt-3">
<div class="col text-end">
<!-- Password -->
<label for="passwordCurrent" class="form-label">Password</label>
</div>
<div class="col-4">
<input id="passwordCurrent" name="passwordCurrent" type="password" class="form-control" maxlength="30">
</div>
</div>
<div *ngIf="!show" class="row row-cols-3 pt-3">
<div class="col"></div>
<div class="col text-start">
<!-- Blocking -->
<button type="submit" class="btn-green" [disabled]="formulaire.form.invalid">Blocking</button>
</div>
</div>
</form>
Service.ts
#Injectable()
export class LockingService {
private readonly api: string = environment.api;
constructor(
private http: HttpClient,
private router: Router,
private store: Store
) {}
getLocking(): Observable<ApiResponse> {
return this.http.post<ApiResponse>(
this.api + `/WBBLOCKING`,
{
PTF_IN: {
ETAT: 4, // blocking
MONTANT: 0,
},
MODE: "ETAT",
},
{ headers: { AddCustomer: "" } }
);
}
getPortfolios(): Observable<SelectPortfolioResponse> {
return this.http.post<SelectPortfolioResponse>(
this.api + `/WBPORTFOLIO`,
{},
{ headers: { AddCustomer: "" } }
);
}
selectPortfolio(selectPortfolio: SelectPortfolio): Observable<void> {
return this.store.dispatch(
new SetCurrentPortfolioAction(
SelectPortfolio_To_Portfolio(selectPortfolio)
)
);
}
}
In the locking.component.ts I have this:
How do I interact the html input password in typescript?
Thank you very much for your help and explanation.
export class LockingComponent implements OnInit {
private unsubscribe$ = new Subject<void>();
show = false;
buttonName = "Show";
hide: any;
#Select(ProfileState.currentPortfolio)
currentPortfolio$!: Observable<Portfolio>;
#Select(AuthState.user) user$!: Observable<string>;
constructor(
private service: LockingService,
private store: Store,
private router: Router
) {}
ngOnInit(): void {}
locking(): void {
this.service
.getLocking()
.pipe(
takeUntil(this.unsubscribe$),
takeWhile((res) => res.RETURNCODE === ApiResponseCodeEnum.Ok),
tap(() => {
this.show = !this.show;
if (this.show) {
this.buttonName = "Hide";
console.log(this.show);
} else {
this.buttonName = "Show";
}
}),
concatMap(() => this.service.getPortfolios()),
takeWhile(
(res) =>
res.RETURNCODE === ApiResponseCodeEnum.Ok && res.PTF.length > 0
),
concatMap((res) => this.service.selectPortfolio(res.PTF[0]))
)
.subscribe();
}
}

How to asynchronously check if a username is already taken with formControl?

This is my method where i try to check from the database which usernames are already taken:
takenUsernames(control: FormControl): Promise<any> | Observable<any> {
const promise = new Promise<any>((resolve, reject) => {
this.employeeService.getEmployeeList().subscribe((employees) => {
this.employees = employees;
for (let employee of control.value) {
if (this.employees.indexOf(employee) !== -1) {
resolve({ usernameIsTaken: true });
} else {
resolve(null);
}
}
});
});
return promise;
}
And this is my formGroup object:
this.newProjectForm = new FormGroup({
projectName: new FormControl(null, Validators.required),
description: new FormControl(null),
assignedEmployees: new FormControl(null, [Validators.required]),
employees: new FormArray(
[],
[this.forbidUsernames.bind(this)],
[this.takenUsernames.bind(this)]
),
});
As you can see employees is a FormArray so i loop true control.value to check each username but it doesnt seem to work. The problem is in the takenUsernames function because i dont get the pending status if i inspect the element.
Here's the whole html code:
link
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#600&family=Roboto+Mono:wght#500&display=swap"
type="text"
rel="stylesheet"
/>
<div class="backdrop" (click)="onFormAlertClose()"></div>
<div class="alert-box">
<form [formGroup]="newProjectForm" (ngSubmit)="onSubmit()">
<h3>New Project Form</h3>
<div class="form-group">
<label for="projectName">Project Name</label>
<input
type="text"
id="projectName"
class="form-control"
[formControlName]="'projectName'"
/>
<!-- if omit [] also omit ''-->
<span
*ngIf="
!newProjectForm.get('projectName').valid &&
newProjectForm.get('projectName').touched
"
>Please enter a project name</span
>
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea
id="description"
class="form-control"
formControlName="description"
></textarea>
</div>
<div class="form-group">
<label for="assignedEmployees">Assign Employees</label>
<div class="larger-width-divider"></div>
<input type="text" class="search-box" placeholder="Search..." />
<select
name="employees"
class="form-control"
multiple
size="employees.length"
formControlName="assignedEmployees"
>
<ng-container *ngIf="newProjectForm.get('projectName').valid">
<option id="option" *ngFor="let employee of employees">{{
employee.userName
}}</option>
</ng-container>
</select>
<span
*ngIf="
!newProjectForm.get('assignedEmployees').valid &&
newProjectForm.get('assignedEmployees').touched
"
>Please select at least one employee</span
>
</div>
<div>
<button
type="button"
class="add-emp-btn"
*ngIf="!addEmployeeBtnClicked"
(click)="onEmpBtnClicked()"
[disabled]="newProjectForm.invalid"
>
Add Employees
</button>
<ng-container *ngIf="addEmployeeBtnClicked" formArrayName="employees">
<div *ngFor="let employeesControl of getControls(); let i = index">
<label for="userName">Insert one or multiple employee</label>
<input type="text" [formControlName]="i" />
<div class="width-divider"></div>
<button
type="button"
class="goto-add-emp-btn"
(click)="onEmpBtnClicked()"
>
Cancel
</button>
<div>
<span
class="last-span"
*ngIf="
!newProjectForm.get('employees').valid &&
newProjectForm.get('employees').touched
"
>
<span
*ngIf="newProjectForm.get('employees').errors?.nameIsForbidden"
>This name is invalid!</span
>
<span *ngIf="newProjectForm.get('employees').errors?.required"
>Add at least on employee</span
>
<span
*ngIf="newProjectForm.get('employees').errors?.usernameIsTaken"
></span>
</span>
</div>
</div>
</ng-container>
</div>
<div class="height-divider"></div>
<div class="alert-box-actions">
<button type="submit" class="submit" [disabled]="!newProjectForm.valid">
Create
</button>
<div class="width-divider"></div>
<button type="button" (click)="onFormAlertClose()">Cancel</button>
</div>
</form>
</div>
And here's the whole class:
import { Component, Output, OnInit } from "#angular/core";
import { Subject, Observable } from "rxjs";
import { ProjectService } from "src/app/services/project.service";
import { FormGroup, FormControl, Validators, FormArray } from "#angular/forms";
import { IEmployee } from "../entities/employee";
import { EmployeeService } from "src/app/services/employee.service";
#Component({
selector: "app-alert",
templateUrl: "./new-project-form-alert.component.html",
styleUrls: ["./new-project-form-alert.component.css"],
})
export class AlertComponent implements OnInit {
closeNewProjectAlert: Subject<boolean> = new Subject<boolean>();
employees: IEmployee[];
newProjectForm: FormGroup;
addEmployeeBtnClicked = false;
forbiddenUsernames = [
"Admin",
"Manager",
"Developer",
"Guest",
"admin",
"manager",
"developer",
"guest",
];
constructor(
private projectService: ProjectService,
private employeeService: EmployeeService
) {}
ngOnInit() {
this.employeeService.getEmployeeList().subscribe((employees) => {
this.employees = employees;
});
this.newProjectForm = new FormGroup({
// properties are string so when the files is minified they are not destroyed
projectName: new FormControl(null, Validators.required),
description: new FormControl(null),
assignedEmployees: new FormControl(null, [Validators.required]),
employees: new FormArray(
[],
[this.forbidUsernames.bind(this)],
this.takenUsernames
),
});
}
onFormAlertClose() {
this.projectService.closeNewProjectForm$.next(true);
}
onSubmit() {
console.log(this.newProjectForm);
this.newProjectForm.reset();
this.onFormAlertClose();
console.log((<FormArray>this.newProjectForm.get("employees")).controls);
}
onEmpBtnClicked() {
if (!this.addEmployeeBtnClicked) {
this.addEmployeeBtnClicked = true;
const control = new FormControl(null, Validators.required);
(<FormArray>this.newProjectForm.get("employees")).push(control);
} else {
this.addEmployeeBtnClicked = false;
(<FormArray>this.newProjectForm.get("employees")).removeAt(0);
}
}
forbidUsernames(control: FormControl): { [s: string]: boolean } {
for (let employee of control.value) {
if (this.forbiddenUsernames.indexOf(employee) !== -1) {
return { nameIsForbidden: true };
}
}
return null; // this if username is valid, do not return false
}
takenUsernames(control: FormControl): Promise<any> | Observable<any> {
const promise = new Promise<any>((resolve, reject) => {
const observable = this.employeeService.getEmployeeList().subscribe((employees) => {
this.employees = employees;
for (let employee of control.value) {
if (this.employees.indexOf(employee) !== -1) {
resolve({ usernameIsTaken: true });
} else {
resolve(null);
}
}
});
});
return promise;
}
getControls() {
return (<FormArray>this.newProjectForm.get("employees")).controls;
}
}
Sorry i know it a big mess, it's my first web app.
Edit: i provided a small video of the form if it helps: https://streamable.com/ua7mcq

Well yep, i have named the formArray as employees because when i submit the form the username or usernames get added to IEmployee objects and saved in the database.
But of the time of typing the usernames they are just string and i was comparing these strings with the employee objects.
So here's it fixed:
takenUsernames(control: FormControl): Promise<any> | Observable<any> {
const promise = new Promise<any>((resolve, reject) => {
const observable = this.employeeService.getEmployeeList().subscribe((employees) => {
this.employees = employees;
const usernames = this.employees.map(employee => employee.userName)
console.log(usernames)
for (let employee of control.value) {
if (usernames.indexOf(employee) !== -1) {
resolve({ usernameIsTaken: true });
} else {
resolve(null);
}
}
});
});
return promise;
}
But now i will reduce the input box to be able to add just one employee at time, wasted too much time on these component.

How to make refresh data from firebase in a component after add new data to firebase?

I have ReviewComponent. In this component I show all reviews and can write a new review. But when I added a new review, all reviews don't refresh and refresh only if I click a link in the component("Write a review" or "Read all reviews"). How to make refresh all reviews after add a new review?
review.component.ts
import { Component, OnInit, ChangeDetectionStrategy, Input } from '#angular/core';
import { FormBuilder } from '#angular/forms';
import { ItemService } from '../../services/item.service';
#Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'app-review',
templateUrl: './review.component.html',
styleUrls: [ './review.component.css' ]
})
export class ReviewComponent implements OnInit {
#Input() itemId: string;
stars = [];
reviewId: string;
reviews;
commentBox: boolean = false;
reviewsBox: boolean = false;
grades = 0;
commentForm = this.fb.group({
comment: [ '' ],
assessment: [ '1' ]
});
constructor(private fb: FormBuilder, private _itemService: ItemService) {}
ngOnInit() {
this.getReviews();
}
getReviews() {
this._itemService.getReviews(this.itemId).subscribe((data) => {
this.reviews = data.map((review) => {
return {
id: review.payload.doc.id,
...review.payload.doc.data()
};
});
this.reviewId = this.reviews.length + '';
let avgAssess = 0;
this.reviews.forEach((review) => {
avgAssess += parseInt(review.assessment);
});
this.grades = Math.floor(avgAssess / this.reviews.length);
console.log(this.grades);
this.stars = [];
for (let i = 0; i < this.grades; i++) {
this.stars.push('grade');
}
for (let i = this.grades; i < 5; i++) {
this.stars.push('star_border');
}
});
}
showCommentBox() {
this.commentBox = !this.commentBox;
}
showReviewsBox() {
this.reviewsBox = !this.reviewsBox;
}
sendComment() {
let review = {
comment: this.commentForm.get('comment').value,
assessment: this.commentForm.get('assessment').value
};
this._itemService.addReview(this.itemId, this.reviewId, review);
this.showCommentBox();
this.commentForm.patchValue({
comment: [ '' ],
assessment: [ '1' ]
});
}
validPaymentInput(event) {
var char = String.fromCharCode(event.which);
if (!/[1-5]/.test(char)) {
event.preventDefault();
}
}
}
item.service.ts
import { Injectable } from '#angular/core';
import { AngularFirestore } from '#angular/fire/firestore';
#Injectable({
providedIn: 'root'
})
export class ItemService {
constructor(private _firestore: AngularFirestore) {}
addReview(key: string, reviewId, review) {
this._firestore.collection('items').doc(key).collection('reviews').doc(reviewId).set(review);
}
getReviews(key: string) {
return this._firestore.collection('items').doc(key).collection('reviews').snapshotChanges();
}
}
review.component.html
<div class="container">
<div>
<div class="stars" >
<mat-icon *ngFor="let star of stars">{{star}}</mat-icon>
<div>({{reviews.length}})</div>
</div>
<div class="reviews" (click)="showReviewsBox()">
<span>Read all {{reviews.length}} Reviews</span>
</div>
<div class="write" (click)="showCommentBox()">
<span>Write a review</span>
</div>
</div>
<div class="comment-box" *ngIf="commentBox" [formGroup]="commentForm">
<div [ngClass]="{'has-error' : commentForm.get('comment').errors && (commentForm.get('comment').touched || commentForm.get('comment').dirty)}">
<label> Enter a comment</label>
<textarea formControlName="comment" required></textarea>
<div class="error-msg"
*ngIf="commentForm.get('comment').errors && (commentForm.get('comment').touched || commentForm.get('comment').dirty)">
<span *ngIf="commentForm.get('comment').errors.required">
Comment field is required
</span>
</div>
</div>
<div [ngClass]="{'has-error' : commentForm.get('assessment').errors && (commentForm.get('assessment').touched || commentForm.get('assessment').dirty)}">
<label for="">Evaluate from 1 to 5</label>
<input type="text" (keypress)="validPaymentInput($event)" formControlName="assessment" max="5" maxlength="1" required>
<app-button btnText="Submit" [disabled]="!commentForm.valid" (click)="sendComment()"></app-button>
</div>
</div>
<div class="reviews-box" *ngIf="reviewsBox && reviews.length > 0">
<div class="review" *ngFor="let review of reviews">{{ review.comment }}</div>
</div>
</div>

Call getReviews() method inside your sendComment() method. Refer code snippet below:
sendComment() {
let review = {
comment: this.commentForm.get('comment').value,
assessment: this.commentForm.get('assessment').value
};
this._itemService.addReview(this.itemId, this.reviewId, review);
this.getReviews();
this.showCommentBox();
this.commentForm.patchValue({
comment: [ '' ],
assessment: [ '1' ]
});
}
Update:
Have noticed that the change detection strategy is onPush, which means that you have ensure that all your objects are immutable. Please change the method getReviews() to as shown below:
getReviews() {
this._itemService.getReviews(this.itemId).subscribe((data) => {
this.reviews = data.map((review) => {
return {
id: review.payload.doc.id,
...review.payload.doc.data()
};
});
this.reviewId = this.reviews.length + '';
let avgAssess = 0;
this.reviews.forEach((review) => {
avgAssess += parseInt(review.assessment);
});
this.grades = Math.floor(avgAssess / this.reviews.length);
console.log(this.grades);
this.stars = [];
const _stars:any=[];
for (let i = 0; i < this.grades; i++) {
_stars.push('grade');
}
for (let i = this.grades; i < 5; i++) {
_stars.push('star_border');
}
// to ensure that your object is immutable. Do not change the object content once it is assigned
this.stars=_stars;
});
}
Update 2:
Looks like the objects are immutable, which is causing the change detection to not work. Please remove the following line from your component:
changeDetection: ChangeDetectionStrategy.OnPush,

binding data to form array in angular

I have created an angular 7 app that has the ability to add and remove the controls dynamically. However, I am not sure how to bind the data to the form.
In the code attached below, I am trying to add and remove websites. I figured out the reason why the data was not getting bound to the UI elements. Websites under FirmDetails model is an array of objects. At the moment for testing, I have added websiteUrl: FirmDetails.Websites[0].WEBSITE_URL. What if I have more than one object. How do I bind then?
UI
<div class="form-group row">
<label for="inputEmail" class="col-md-1 col-form-label header">Websites</label>
<div class="col-md-9">
<div class="form-group row">
<div class="col-md-3">
<label for="inputEmail">Website URL</label>
</div>
<div class="col-md-3">
<label for="inputEmail">User Name</label>
</div>
<div class="col-md-3">
<label for="inputEmail">Password</label>
</div>
</div>
<div formArrayName="websites"
*ngFor="let item of frmFirm.get('websites').controls; let i = index; let last = last">
<div [formGroupName]="i">
<div class="form-group row">
<div class="col-md-3">
<input style="width:100%" formControlName="websiteUrl"
placeholder="Website Url">
</div>
<div class="col-md-3">
<input style="width:100%" formControlName="username" placeholder="User Name">
</div>
<div class="col-md-3">
<input style="width:100%" formControlName="password" placeholder="Password">
</div>
<div class="col-md-3">
<button (click)="removeWebsite()">Remove Website</button>
</div>
</div>
</div>
</div>
<button (click)="addWebsite()">Add Website</button>
</div>
</div>
Component
import { Component, Injectable, NgZone, ViewEncapsulation, ViewChild, Input } from '#angular/core';
import { OnInit } from '#angular/core';
import { FirmService } from '../services/firm.service';
import * as ClassicEditor from '#ckeditor/ckeditor5-build-classic';
import { CommonDataService } from '../services/common.data.service';
import { FormGroup, FormControl, FormBuilder, FormArray } from '#angular/forms';
import { ListItem } from '../models/listItem';
#Component({
selector: 'mgr-firm',
templateUrl: './firm.component.html'
})
export class FirmComponent implements OnInit {
private Error: string;
public FirmDetails: any;
public EditMode: boolean;
public Editor = ClassicEditor;
public EditorConfig: string;
public events: string[] = [];
#Input() FirmId: number;
DateFoundedDate: Date;
public frmFirm: FormGroup;
constructor(private _fb: FormBuilder, private firmService: FirmService, private commonDataService: CommonDataService) {
}
ngOnInit() {
this.initializeFormModel();
this.getFirmDetails();
}
initializeFormModel() {
this.frmFirm = this._fb.group({
firmName: [''],
shortName: [''],
alternateName: [''],
dateFounded: [''],
intraLinks: this._fb.array([
this.createCredentials()
]),
firmHistory: [''],
People: [''],
websites: this._fb.array([
this.createWebsite()
]),
addressess: this._fb.array([
this.createAddress()
])
});
}
// public addWebsite(): void {
// const websites = this.frmFirm.get('websites') as FormArray;
// websites.push(this._fb.control(''));
// }
public addWebsite(): void {
this.websites.push(this.createWebsite());
}
public removeWebsite(index: number): void {
const websites = this.frmFirm.get('websites') as FormArray;
websites.removeAt(index);
}
private createWebsite(): FormGroup {
return this._fb.group({
websiteUrl: [''],
username: [''],
password: ['']
});
}
public addAddress(): void {
this.addressess.push(this.createAddress());
}
public removeAddress(index: number): void {
const addressess = this.frmFirm.get('addressess') as FormArray;
addressess.removeAt(index);
}
private createAddress(): FormGroup {
return this._fb.group({
city: [''],
street: [''],
line2: [''],
line3: [''],
zipCode: [''],
phone: ['']
});
}
public addCredentials(): void {
this.intraLinks.push(this.createCredentials());
}
public removeCredentials(index: number): void {
const intraLinks = this.frmFirm.get('intraLinks') as FormArray;
intraLinks.removeAt(index);
}
private createCredentials(): FormGroup {
return this._fb.group({
intraUsername: [''],
intraPassword: ['']
});
}
get websites(): FormArray {
return <FormArray>this.frmFirm.get('websites');
}
get addressess(): FormArray {
return <FormArray>this.frmFirm.get('addressess');
}
get intraLinks(): FormArray {
return <FormArray>this.frmFirm.get('intraLinks');
}
get cities(): ListItem[] {
return JSON.parse(this.FirmDetails.LongCitiesJson).map(x => new ListItem(x.CITY_ID, x.CITY_NAME, null));
}
setFormValues(FirmDetails: any) {
this.frmFirm.patchValue({
firmName: FirmDetails.Firm.NAME,
shortName: FirmDetails.Firm.SHORT_NAME,
alternateName: FirmDetails.Firm.ALTERNATE_NAME,
dateFounded: this.getDate(FirmDetails.Firm.DATE_FOUNDED),
firmHistory: FirmDetails.Firm.HISTORY_HTML,
People: FirmDetails.People
});
const websiteGroup = this._fb.group({
// websiteUrl: FirmDetails.Websites[0].WEBSITE_URL,
// username: FirmDetails.Websites[0].USERNAME,
// password: FirmDetails.Websites[0].PASSWORD
websites: FirmDetails.Websites
});
this.frmFirm.setControl('websites', this._fb.array([websiteGroup]));
const addressGroup = this._fb.group({
city: this.FirmDetails.LongCitiesJson,
addressess: FirmDetails.Addresses
// street: FirmDetails.Firm.Addresses[0].LINE1,
// line2: FirmDetails.Firm.Addresses[0].LINE2,
// line3: FirmDetails.Firm.Addresses[0].LINE3,
// zipCode: FirmDetails.Firm.Addresses[0].POSTAL_CODE,
// phone: FirmDetails.Firm.Addresses[0].SWITCHBOARD_INT
});
this.frmFirm.setControl('addressess', this._fb.array([addressGroup]));
const intraLinksGroup = this._fb.group({
intraUsername: FirmDetails.Intralinks[2].USERNAME,
intraPassword: FirmDetails.Intralinks[2].PASSWORD
});
this.frmFirm.setControl('intraLinks', this._fb.array([intraLinksGroup]));
}
getFirmDetails() {
if (this.FirmId != null) {
this.firmService.getFirmDetails(this.FirmId)
.subscribe(data => {
this.FirmDetails = data;
this.setFormValues(this.FirmDetails);
},
err => {
this.Error = 'An error has occurred. Please contact BSG';
},
() => {
});
}
}
get dateFoundedDate(): string {
const dateString = this.FirmDetails.Firm.DATE_FOUNDED;
const results =parseInt(dateString.replace(/\/Date\(([0-9]+)[^+]\//i, "$1"));
const date = new Date(results);
const month = date.toLocaleString('en-us', { month: 'long' });
return (month + '-' + date.getFullYear());
}
private getDate(dateFounded: string): Date {
const results =parseInt(dateFounded.replace(/\/Date\(([0-9]+)[^+]\//i, "$1"));
const date = new Date(results);
return new Date (date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate());
}
saveManager() {
this.firmService.createFirm(this.FirmDetails)
.subscribe(data => {
this.getFirmDetails();
this.EditMode = !this.EditMode;
},
err => {
this.Error = 'An error has occurred. Please contact BSG';
},
() => {
});
}
dateFoundedChanged(dateFoundedDate: Date) {
this.DateFoundedDate = dateFoundedDate;
}
}

You can bind the array of values using patchValue like this,
setFormValues(FirmDetails: any) {
this.frmFirm.patchValue({
firmName: FirmDetails.Firm.NAME,
shortName: FirmDetails.Firm.SHORT_NAME,
alternateName: FirmDetails.Firm.ALTERNATE_NAME,
dateFounded: FirmDetails.Firm.DATE_FOUNDED,
firmHistory: FirmDetails.Firm.HISTORY_HTML,
People: FirmDetails.People,
websites: FirmDetails.Websites
});
}
since, the FirmDetails.Websites value is an array the value will get binded if you do like the above method
First you have to invoke the initializeFormModel() function and then
you have to invoke getFirmDetails() function in the ngOnInit() so
that the form gets initialized first and the value gets binded.
patchValue can also be done for form array

Angular: Cannot find control with name: 'date'

I am creating a form where a user select date and fill the form and subimit the form, here is what I have . for reference I am using igx-calendar
calendar component.ts:
import { Component, OnInit, forwardRef, Input, ElementRef, ViewChild } from '#angular/core';
import { IgxCalendarComponent, IgxDialogComponent } from 'igniteui-angular';
import { NgModel, FormControl, ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '#angular/forms';
#Component({
selector: 'app-calendar',
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.scss'],
providers: [
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CalendarComponent), multi: true }
]
})
export class CalendarComponent implements ControlValueAccessor, OnInit {
#ViewChild('calendar') public calendar: IgxCalendarComponent;
#ViewChild('alert') public dialog: IgxDialogComponent;
#Input()
label: string;
private _theDate: string;
constructor() { }
propagateChange = (_: any) => { };
onTouched: any = () => { };
writeValue(obj: any): void {
console.log('writeValue => obj : ', obj);
if (obj) {
this._theDate = obj;
}
}
registerOnChange(fn: any): void {
this.propagateChange = fn;
console.log('registerOnChange => fn : ', fn);
}
registerOnTouched(fn: any): void {
this.onTouched = fn;
console.log('registerOnTouched => fn : ', fn);
}
get theDate() {
console.log('get theDate()');
return this._theDate;
}
set theDate(val) {
console.log('set theDate(val) - val => ', val);
this._theDate = val;
this.propagateChange(val);
}
public verifyRange(dates: Date[]) {
if (dates.length > 5) {
this.calendar.selectDate(dates[0]);
this.dialog.open();
}
}
ngOnInit() {
}
}
calender.html
<div class="sample-wrapper">
<div class="sample-content">
<!-- Single selection mode -->
<article class="sample-column calendar-wrapper">
<igx-calendar></igx-calendar>
</article>
</div>
</div>
Booking.component.ts UPDATE
export class BookingComponent implements OnInit {
comments: {};
addcomments: Comment[];
angForm: FormGroup;
// tslint:disable-next-line:max-line-length
validEmail = false;
constructor(private flashMessages: FlashMessagesService,
private fb: FormBuilder,
private activeRouter: ActivatedRoute,
private moviesService: MoviesService) {
this.comments = [];
this.createForm();
}
onChange(newValue) {
// tslint:disable-next-line:max-line-length
const validEmail = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (validEmail.test(newValue)) {
this.validEmail = true;
} else {
this.validEmail = false;
}
}
createForm() {
this.angForm = this.fb.group({
email: new FormControl('', [Validators.required, Validators.email])
});
}
addReview(date, email, city, hotel) {
this.moviesService.addReview(date, email, city, hotel).subscribe(success => {
this.flashMessages.show('You are data we succesfully submitted', { cssClass: 'alert-success', timeout: 3000 });
// get the id
this.activeRouter.params.subscribe((params) => {
// tslint:disable-next-line:prefer-const
let id = params['id'];
this.moviesService.getComments(id)
.subscribe(comments => {
console.log(comments);
this.comments = comments;
});
});
}, error => {
this.flashMessages.show('Something went wrong', { cssClass: 'alert-danger', timeout: 3000 });
});
}
ngOnInit() {
}
}
Booking.component.html
<div class="row about-booking">
<flash-messages></flash-messages>
<form [formGroup]="angForm" class="form-element">
<div class="col-sm-4 offset-sm-2 about-booking_calendar">
<div class="form-group form-element_date">
<app-calendar formControlName="date" [(ngModel)]="theDate" #date></app-calendar>
</div>
</div>
<div class="col-sm-4 about-booking_form">
<div class="form-group form-element_email">
<input type="email" class="form-control info" placeholder="Email" formControlName="email" #email (ngModelChange)="onChange($event)">
</div>
<div *ngIf="angForm.controls['email'].invalid && (angForm.controls['email'].dirty || angForm.controls['email'].touched)"
class="alert alert-danger">
<div *ngIf="angForm.controls['email'].errors.required">
Email is required.
</div>
</div>
<div class="input-group mb-3 form-element_city">
<select class="custom-select" id="inputGroupSelect01" #cityName>
<option selected *ngFor="let city of cities" [ngValue]="city.name">{{city.name}}</option>
</select>
</div>
<div class="input-group mb-3 form-element_hotel">
<select class="custom-select" id="inputGroupSelect01" #hotelName>
<option selected *ngFor="let hotel of hotels" [ngValue]="hotel.name">{{hotel.name}}</option>
</select>
</div>
<div class="form-group">
<button type="submit" (click)="addReview(date.value, email.value, cityName.value , hotelName.value)" class="btn btn-primary btn-block form-element_btn"
[disabled]="!validEmail">Book</button>
</div>
</div>
</form>
</div>
when I submit the data I get the following error:
BookingComponent.html:59 ERROR Error: Cannot find control with name:
'date'
what is wrong with my code?

in your createForm() function you didn't add the date FormControl
createForm() {
this.angForm = this.fb.group({
email: new FormControl('', [Validators.required, Validators.email]),
date: new FormControl('') // this line missing in your code
});
}
you shouldn't use both ngModel (template driven forms) and formControlName (reactive forms) in the same input.

In my case I was getting this same error for all the fields in the FormGroup, the reason was the data from server was NOT received and the html UI code attempted to executed the reactive form and hence the error. So to solve this issue I had to use the *ngIf condition on the form element and stopped the rendering of the form until the server response was completed.
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()" *ngIf="userProfile != undefined">