We Keep Coding

Add dynamic component in the DOM

I have a project in Angular in which I have created a dialog with several fields for a component. What I want is to take advantage of this dialog for other components, but the amount of data varies.
This is my dialog.component.html:
<div class="dialog-container">
<mat-form-field>
<input matInput placeholder="Name" [(ngModel)]="data.name">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Phone" [(ngModel)]="data.phoneNumber">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Email" [(ngModel)]="data.email">
</mat-form-field>
</div>
I want to know if it is possible to create only one mat-form component and display as many as necessary, passing it the number of fields that I want to generate.
This is what I want the dialog.component.html to contain, to achieve the same as above (I don't know if this is possible):
<div class="dialog-container">
<mat-form-field>
<input matInput placeholder={{place}} [(ngModel)]={{data}}>
</mat-form-field>
</div>
From only one mat-form-field is it possible to show the same result as the first example?

You could create a custom directive :
import { Directive, Input } from '#angular/core';
import { NgForOf } from '#angular/common';
#Directive({
selector: '[ngFor][ngForRepeat]'
})
export class NgForRepeat<T> extends NgForOf<T> {
#Input() set ngForRepeat(repeat: number) {
this.ngForOf = new Array(repeat >= 0 ? repeat : 0);
}
}
And use it as follow in you template :
<ng-container *ngForRepeat="3">
<mat-form-field>
<input matInput placeholder={{place}} [(ngModel)]={{data}}>
</mat-form-field>
</ng-container>

Binding Input Controls to different elements inside FormArray

I'm facing the following issue and I am unsure how to solve it, here is a minimal example https://stackblitz.com/edit/angular-ivy-vwq15f .
In this example I am trying to bind the two input field (name and gender)
<div formArrayName="formArray" class="column">
<div [formGroupName]="inspectedForm">
<h1>Input field for Person {{inspectedForm +1}}</h1>
<label for="name">name</label>
<input formControlName="name" type="text" class="input" placeholder="Name">
<label for="gender">gender</label>
<input formControlName="gender" >
</div>
dynamically to an element inside a FormArray. By clicking on the person (Person #1) I want to be able to change the specific properties that person with the provided input fields. The solution should be capable of selecting a person to edit the properties WITHOUT generating new Input fields.
I guess I must somehow bind to the formControlName of the specific Input like [formControlName="blabla" but I am very unsure.
Thanks a lot in advance :)
My html looks like this
<form [formGroup]="parentForm">
<div *ngFor="let rule of arrayForm.controls; let i = index" class="button is-fullwidth not-clickable">
<button (click)="changeInspectedElement(i)">Person {{i +1}}</button>
</div>
<button (click)="addElement()">Add Element</button>
<div formArrayName="formArray" class="column">
<div [formGroupName]="inspectedForm">
<h1>Input field for Person {{inspectedForm +1}}</h1>
<label for="name">name</label>
<input formControlName="name" type="text" class="input" placeholder="Name">
<label for="gender">gender</label>
<input formControlName="gender" >
</div>
</div>
</form>
<p>
{{parentForm.value | json}}
</p>
My .ts looks like this
import { Component } from '#angular/core';
import { FormArray, FormBuilder, FormGroup } from '#angular/forms';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
parentForm: FormGroup
inspectedForm: number = 0
constructor(private _fb: FormBuilder,) {
this.parentForm = this._fb.group({
formArray: this._fb.array([
this.createArrayForm()
])
})
}
createArrayForm() {
return this._fb.group({
name: [''],
gender: ['']
})
}
changeInspectedElement(index) {
let value = this.arrayForm.value[index]
this.inspectedForm = index
}
addElement() {
this.arrayForm.push(this.createArrayForm())
}
get arrayForm() {
return this.parentForm.get('formArray') as FormArray
}
}
Please let me know if there is anything unclear about my question.

You has a FormArray of FormGroup, so, you can create a function that return this formGroup
getGroup(index)
{
return (this.parentForm.get('formArray') as FormArray).at(index) as FormGroup
//or using your function arrayForm
//return this.arrayForm.at(index) as FormGroup
}
So, you can feel free to use this function in html to indicate FormGroup
<div [formGroup]="getGroup(inspectedForm)">
<input formControlName="name" type="text" class="input" placeholder="Name">
<input formControlName="gender" >
Yes, it's not necesary use FormArray. futhermore, in the .html has no reference to parentForm. Well the only you need is that your buttons change the variable inspectedForm.
<button (click)="inspectedForm=i">Person {{i +1}}</button>
your forked stackblitz

Setting current date and default time in angular datepicker

I want to set the default date to current date and customize default time in a datepicker using Angular, e.g Current date: 07-02-2020 and default custom time should be 08:00 AM. How can i achieve this please. Here is my html code which only shows date and time based on value selected.
<label class="col-sm-12 col-md-8 form-control-label ml-2" for="date_from">{{'From Date' |
translate}} <span class="danger">*</span>:</label>
<div class="col-md-12">
<input type="datetime-local" [(ngModel)]="leaveList.date_from"
[max]="leaveList.date_to" class="form-control input-md" id="date_from"
name="date_from" (change)="onChangeDate()" max="9999-12-31">
</div>
.component.ts file

You need to use moment library for date/time formatting
1-install moment using npm i moment
2-You have to assign value to date_from in your .ts, just like that
leaveList.date_from = moment().format('MM-DD-YYYY 8:30A')

<input required class="form-control" [(ngModel)]="myDate" type="datetime-local" name="myDate" id="myDate"/>
you can customize the date as you want instead of using new Date()
this.myDate = this.datepipe.transform(new Date(), 'yyyy-MM-ddThh:mm'),
so you have to import DatePipe
import {DatePipe} from '#angular/common'
and initialize in the constructor
constructor(public datepipe: DatePipe){
}
and also add it int the app.module.ts as a provider
providers: [
DatePipe,
....
],
read more https://angular.io/api/common/DatePipe

TypeError: Cannot read property 'value' of undefined in Angular 4

I am coming to the error in Angular 4. (Angular-CLI), that says:
TypeError: Cannot read property 'value' of undefined. So, I am new to Angular 4 coming from Angular 1. So, I will be thankful for your help. Thanks in advance.
Here is my code.
app.component.html
<!-- using semantic-ui -->
<form class="ui large form segment">
<h3 class="ui header">Add a link</h3>
<!-- added the title -->
<div class="field">
<label for="title">Title:</label>
<input name="title" #newtitle>
</div>
<!-- added the link -->
<div class="field">
<label for="link">Link:</label>
<input name="link" #newLink>
</div>
<!--added the button -->
<button (click)="addArticle(newTitle, newLink)" class="ui positive right floated button">
Submit Link
</button>
</form>
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
addArticle(title: HTMLInputElement, link: HTMLInputElement):
boolean {
console.log(`Adding article title: ${title.value}
and link: ${link.value}`);
return false;
}
}

You casing of the reference variable and the parameter passed do not match. Change <input name="title" #newtitle> to <input name="title" #newTitle> since your are calling addArticle with newTitle with a capital T.

How to call a function on click of date in html 5 datepicker input type

I had a html5 date-time picker.Now on mouseclick(select) of date from date picker I want to call a function.I wonder how can we do that in angular js ...can
someone help me.
html:
<div class="col-lg-4">
<input class="form-control" type="datetime" date-time auto-close="true" view="date"
min-view="date" format="dd/MM/yyyy" ng-model="$root.Details.date" value = "{{dob}}">
</div>
Js
class CreateCustomerCtrl {
constructor($scope,$rootScope,$http,$state,$reactive,$timeout,Notification)
{
//logic here
}
export default angular.module('createCustomer', [
angularMeteor
])
.component('newCustomer', {
templateUrl: 'client/customer/new-customer.html',
controller:['$scope','$rootScope','$http','$state','$reactive','$timeout','Notification'
,customerCtrl]});
So on select of date I want to call a function.
Thanks

You could use ng-change="yourFunc()" event on input with ng-model="myDate" for binding value and inside function you can put your logic.

You should try <input type="date" onchange="return function(this) />;" and return your function to do whatever you want to.