Angular 8 - Working with reactive forms

Here is a fully functional component featuring dynamic creation of form elements and filling them with server data. For more information on modern development with Angular you can visit this course.

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormArray, Validators, FormBuilder } from '@angular/forms';
let emailRegex = "^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$";


// initial server data mockup
let serverData =
{
"users": [
{
"firstName": "server:John",
"lastName": "Bernard",
"email": "john@test.com"
},
{
"firstName": "server:Anna",
"lastName": "Parker",
"email": "anna@test.com"
}
],
"date": 1577788750829
};

@Component({
selector: 'app-root',
styleUrls: ['./app.component.scss'],
template: `
<form [formGroup]="usersForm">
<!-- digg deeper to get the users controls (they are also controls of usersForm-->
<!-- usersForm['controls'].users['controls']; -->
{{ usersForm.get('date').value | date}}
<ng-container *ngFor="let userFromGroup of usersForm.get('users')['controls']; let i = index" >
<div class="formgroup" [formGroup]="userFromGroup"> <!-- binds formgroup from the loop -->
{{i}}
<!-- get values inside the fg object to bind to controls -->
<label>First name:<input type="text" formControlName="firstName"></label>
<label>Last name:<input type="text" formControlName="lastName"></label>
<label>Email:<input type="text" formControlName="email"></label>
<button type="button" class="remove" (click)="removeControl(i)">x</button>
</div>
</ng-container>
</form>
<button type="button" (click)="addNew()">Add new</button>
<button type="button" (click)="setValues()">Set values</button>
<button type="button" (click)="patchValues()">Patch values</button>
<button type="button" (click)="getServerData()">Get from server</button>
{{usersForm.value|json}}
`
})


export class AppComponent implements OnInit {
constructor(private fb: FormBuilder) { }

public usersForm: FormGroup;

ngOnInit() {
this.usersForm = this.fb.group({ // get inside the main form group
users: this.fb.array([ // get inside the array of form control groups
this.fb.group({ // the controls array[0]
firstName: ['user 1', { validators: Validators.required }],
lastName: ['', { validators: Validators.required }],
email: ['', { validators: Validators.pattern(emailRegex) }]
}),
this.fb.group({ // the controls array[1]
firstName: ['user 2', { validators: Validators.required }],
lastName: ['', { validators: Validators.required }],
email: ['', { validators: Validators.pattern(emailRegex) }]
})
]),
date: Date.now()
});
}

removeControl(i) {
let uForm = this.usersForm.get('users') as FormArray;
// we cast to FormArray because of:
// Property 'removeAt' does not exist on type 'AbstractControl
uForm.removeAt(1);
}

patchValues() {
let uForm = this.usersForm.get('users') as FormArray;
uForm.patchValue([
{ email: 'mock@mail.com' }
]);
uForm.controls[0].patchValue(
{ email: 'mock@mail.com' }
);
}

setValues() { // strictly setting data
let formUsers = this.usersForm.get('users') as FormArray;
// foreach of the users
formUsers.setValue([
{
firstName: 'John',
lastName: 'Bernard',
email: 'john@test.com'
},
{
firstName: 'Anna',
lastName: 'Parker',
email: 'anna@test.com'
}
]);
}


getServerData() {
this.usersForm = this.fb.group({
users: this.fb.array([]),
// you can also set initial formgroup inside if you like
/*
users: this.fb.array(
serverData.users.map(u =>
this.fb.group({ // the users from the server
firstName: [u.firstName, { validators: Validators.required }],
lastName: [u.lastName, { validators: Validators.required }],
email: [u.email, { validators: Validators.pattern(emailRegex) }]
})
)),
*/
date: Date.now()
})

let usersArray = this.usersForm.get('users') as FormArray;

serverData.users.map(u => { // for each of the users from the server
usersArray.push( // push new controls into the usersArray
this.fb.group({ // set the controls
firstName: [u.firstName, { validators: Validators.required }],
lastName: [u.lastName, { validators: Validators.required }],
email: [u.email, { validators: Validators.pattern(emailRegex) }]
})
);
});
}

getInfo() {
let uForm = this.usersForm.get('users') as FormArray;
let fcontrol = uForm.controls[0].get('firstName').value;
console.log(fcontrol);
}

addNew() {
let formsArray = this.usersForm.get('users') as FormArray;
let arrayLen = formsArray.length;
let newarrayGroup =
this.fb.group({ // the controls
firstName: ['user 3', { validators: Validators.required }],
lastName: ['', { validators: Validators.required }],
email: ['', { validators: Validators.pattern(emailRegex) }]
});
formsArray.insert(arrayLen, newarrayGroup);
}
}

Congratulations! You can further take a look at more examples in the course!

Star rating script - JavaScript and CSS

There is a whole course on how to achieve star rating using PHP and JavaScript, and here is a simple way consisting of CSS and JavaScript only:

<style>
.rating {
display: flex;
padding: 0;
margin: 0;
}

.rating li {
list-style-type: none
}

.rating-item {
border: 1px solid #fff;
cursor: pointer;
font-size:2em;
color: yellow;
}

/* initial: make all stars full */
.rating-item::before {
content: "\2605";
}

/* make until the clicked star (the rest) empty */
.rating-item.active ~ .rating-item::before {
content: "\2606";
}

/* on hover make all full */
.rating:hover .rating-item::before {
content: "\2605";
}

/* make until the hovered (the rest) empty */
.rating-item:hover ~ .rating-item::before {
content: "\2606";
}

</style>

&lt!--html markup-->

<ul class="rating">
<li class="rating-item" data-rate="1"></li>
<li class="rating-item active" data-rate="2"></li>
<li class="rating-item" data-rate="3"></li>
<li class="rating-item" data-rate="4"></li>
<li class="rating-item" data-rate="5"></li>
</ul>


<script>
const container = document.querySelector('.rating');
const items = container.querySelectorAll('.rating-item')
container.onclick = e => {
const elClass = e.target.classList;
// change the rating if the user clicks on a different star
if (!elClass.contains('active')) {
items.forEach( // reset the active class on the star
item => item.classList.remove('active')
);
console.log(e.target.getAttribute("data-rate"));
elClass.add('active'); // add active class to the clicked star
}
};
</script>

Congratulations !