Angular 4 change layout - html

I have this two layouts:
<div *ngIf="!loginPanel" class="login1">
<a (click)="showLoginPanel()">Login</a>
</div>
<div *ngIf="loginPanel" class="login2">
<input type="text" placeholder="user">
<input type="password" placeholder="placeholder">
</div>
and the typescript:
public loginPanel: boolean;
constructor() { }
ngOnInit() {
this.loginPanel = false;
}
showLoginPanel() {
this.loginPanel = true;
}
In fact, the first div disappear when i click on login. but the second div doesn't replace the first. does anyone know how to do this correctly?

you can use the ngif else
<div *ngIf="!loginPanel; else loginForm" class="login1">
<a (click)="showLoginPanel()">Login</a>
</div>
<ng-template #loginForm>
<div class="login2">
<input type="text" placeholder="user">
<input type="password" placeholder="placeholder">
</div>
</ng-template>

i solve the problem. the else div should be ng-template... so, now its working.
thanks anyway

Related

Angular validations showing during the page load

We are working on the Angular 4 form and set some validations on the input field but the validation is showing when the page load's but we want the validation when the form is submitted or the field is not valid or filled.
Component.html
<div class="headerbutton-group row">
<i class="fa fa-save header-buttons" tooltip ="Save" tabindex="1" (click)="onSave($event)"></i>
<i class="fa fa-close header-buttons" tooltip ="Close" (click)="onCancel($event)"></i>
</div>
<form [formGroup]="editForm" class="col-md-12 ">
<div class="form-group row">
<div class="col-md-6 padding-Mini">
<label class="col-md-12 col-form-label padding-bottom-Mini" for="txtName">Name</label>
<div class="col-md-12">
<input type="text" id="txtName" name="txtName" class="form-control" placeholder="Name" formControlName="name" [class.is-invalid]="!editForm.controls.name.valid" [class.is-valid]="editForm.controls.name.valid" required>
<div class="invalid-feedback" [style.visibility]=
"editForm.controls.name.valid ? 'hidden':'visible'"> Name is required</div>
</div>
</div>
<div class="col-md-6 padding-Mini">
<label class="col-md-12 col-form-label padding-bottom-Mini" for="txtName">Description</label>
<div class="col-md-12">
<input type="text" id="txtDescription" name="txtDescription" class="form-control"
placeholder="Description" formControlName="description">
</div>
</div>
</div>
</form>
Component.ts
#Component({
selector: 'app-edit-form',
templateUrl: './component.html'
})
export class LoginFormComponent implements OnInit {
constructor(fb:FormBuilder) {
public editForm: FormGroup = new FormGroup({
name : new FormControl('', Validators.required),
description : new FormControl(''),
});
}
public onSave(e): void {
if (this.editForm.valid) {
e.preventDefault();
this.save.emit(this.editForm.value);
} else {
this.validateAllFormFields(this.editForm);
}
}
public onCancel(e): void {
e.preventDefault();
this.closeForm();
}
private validateAllFormFields(formGroup: FormGroup) {
Object.keys(formGroup.controls).forEach(field => {
const control = formGroup.get(field);
if (control instanceof FormControl) {
control.markAsTouched({ onlySelf: true });
} else if (control instanceof FormGroup) {
this.validateAllFormFields(control);
}
});
}
}
// Tried this too editForm.controls.name.pristine
We don't know what we are missing. Kindly help us, with useful documents/ Demo's.
try changing this
<div class="invalid-feedback" [style.visibility]="editForm.controls.name.valid ? 'hidden':'visible'">
Name is required
</div>
to this
<div class="invalid-feedback" *ngIf="!editForm.controls.name.valid && editForm.controls.name.touched">
Name is required
</div>
adding a test on "touched" will fix your problem !

Angular 8: Form-Control, No value accessor for form control with name: 'StartDateForm'

My code is as given below:
export class SearchByParametersComponent implements OnInit {
parametersForm=new FormGroup({
NumAppForm:new FormControl (''),
UniqeIDForm :new FormControl (''),
StartDateForm :new FormControl (''),
EndDateForm :new FormControl (''),
NumStatusForm :new FormControl (''),
});
showAll()
{
//x:string
debugger;
this.NumApp=this.parametersForm.controls.NumAppForm.value;
this.x=this.parametersForm.controls.UniqeIDForm.value;
this.NumStatus=this.parametersForm.controls.NumStatusForm.value;
this.sd=this.parametersForm.controls.StartDateForm.value;
// this.sd= this.parametersForm.get('StartDateForm').value;
// this.ed=this.parametersForm.controls.EndDateForm.value;
console.log(this.parametersForm);
if (this.NumApp==undefined) {
alert("חובה לבחור מספר מערכת");
}
else
{
if (this.x!="" && this.x!=undefined)
{
this.ParametersToSearch.NumApp=this.NumApp;
debugger;
this.ParametersToSearch.UniqeID=String(this.x);
debugger
this.checkUniqeId.emit(this.ParametersToSearch);
debugger;
this.ParametersToSearch=new ParametersToSearchDTO();
debugger;
//this.checkUniqeId.emit(x);
}
else if (this.StartDate != null && this.EndDate != null)
{
this.DateObject.StartDate=String(this.StartDate["day"]+"-"+this.StartDate["month"]+"-"+this.StartDate["year"]);
this.DateObject.EndDate=String(this.EndDate["day"]+"-"+this.EndDate["month"]+"-"+this.EndDate["year"]);
this.DateObject.NumApp=this.NumApp;
debugger;
this.checkRangeDate.emit(this.DateObject);
this.DateObject=new DateRangeDTO();
debugger;
}
else if(this.NumStatus!="" && this.NumStatus!=undefined)
{
debugger;
this.StatusSearch.NumApp=this.NumApp;
this.StatusSearch.NumStatus=this.NumStatus;
this.checkStatus.emit(this.StatusSearch);
this.StatusSearch=new StatusSearchDTO();
debugger;
}
else
{
debugger;
this.checkNumApp.emit(this.NumApp);
debugger;
}
}
<form [formGroup]="parametersForm">
<div class="myPage">
<div class="form-group title1">
<span> קוד מערכת <span class="must" title="שדה חובה">*</span></span>
</div>
<div class="form-group title2">
<select class="form-control" formControlName="NumAppForm"
(change)="onChangeApp($event.target.value)" required>
<option>----------</option>
<option *ngFor="let index of ListApp">{{index}}</option>
</select>
</div>
<div class="form-group title3">
<span dir="rtl"> UniqeId </span>
</div>
<div class="form-group title4">
<input class="form-control" formControlName="UniqeIDForm" type="text">
</div>
<div class="form-group title5">
<span class="line"> צרוף קובץ מ</span>
</div>
<div class="form-group title6">
<app-date-picker formControlName="StartDateForm" (dateSelect)="dateSelectStart($event)"></app-date-picker>
</div>
<div class="form-group title7">
<span class="line"> עד</span>
</div>
<div class="form-group title8">
<app-date-picker formControlName="EndDateForm" (dateSelect)="dateSelectEnd($event)" ></app-date-picker>
</div>
<div class="form-group title9">
<span> סטטוס</span>
</div>
<div class="form-group title10">
<select class="form-control" formControlName="NumStatusForm" (change)="onChangeStatus($event.target.value)">
<option>----------</option>
<option *ngFor="let index of ListStatus">{{index}}</option>
</select>
</div>
</div>
</form>
<button type="submit" dir="ltr" class="btn btn-primary" (click)="showAll(); reset()">אישור</button>
<!-- <input class="radio" type="checkbox" title="הכנס UniqeId" label="הכנס" /> <br> -->
<!-- [(ngModel)]="NewUniqeId.value" -->
<!-- formControlName="StartDateForm" -->
<!-- formControlName="EndDateForm" -->
<!-- [formControl]="parametersForm.controls.StartDateForm" -->
a project on Angular 8:
I have a DATE-PICKER tag in HTML
And I have FORM-CONTROL that contains more tags like:
INPUT, SELECT ...
All the FORM-CONTROL elements are identified
By the FROM-CONTROL-NAME attribute
But only the DATE-PICKER element is unknown at all and makes an error when trying to set the FROM-CONTROL-NAME property to it
what can we do?
I need to know it in FORM so I can clear all content with elements with one click .....
The app-date-picker is not a form control and as such cannot set the formControlName. The component should implement ControlValueAccessor to work as a form control. If you need to build custom form controls, please refer
Angular 2 - formControlName inside component

Cannot read property 'setValue' of undefined | Angular

I am having an issue with my HTML component, for some reason the my method is displaying an error:
Cannot read property 'setValue' of undefined when I click the edit button, however everything seems to be ok.
This is my HTML
<div *ngFor="let item of currentUser.myExperiences" class="mt-3">
<div>
<h6>{{item.companyName}} <span *ngIf="item.currentlyWorking" class="badge badge-warning">Currently
working</span>
<span class="float-right">
<a class="text-warning cursor" (click)="openEditModal(item)"><i class="fas fa-pencil-alt"></i></a>
</span>
</h6>
<p class="text-muted p-text-sm">{{item.functions}}</p>
<p class="text-muted p-text-sm" *ngIf="item.references">
<strong>References:</strong>
{{item.references}}
</p>
<hr>
</div>
</div>
<form role="form" [formGroup]="updateForm">
<div class="form-group">
<label for="functions">Funtions</label>
<input type="text" class="form-control" id="functions" name="functions" formControlName="functions" aria-describedby="emailHelp">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
This is my TS component:
public openEditModal(myExperience: IMyExperience): void {
console.log(myExperience);
// Set values to controls
console.log(myExperience.id);
this.experienceId.setValue(myExperience.id);
this.companyName.setValue(myExperience.companyName);
this.functions.setValue(myExperience.functions);
this.workedYears.setValue(myExperience.workedYears);
this.references.setValue(myExperience.references);
this.currentlyWorking.setValue(myExperience.currentlyWorking);
this.updateForm.setValue({
experienceId: this.experienceId.value,
companyName: this.companyName.value,
functions: this.functions.value,
workedYears: this.workedYears.value,
references: this.references.value,
currentlyWorking: this.currentlyWorking.value
});
// Open the modal
this.modalRef = this.modalService.show(
this.editModal,
Object.assign({}, { class: 'gray modal-lg' })
);}
I tried displaying in console the object, but it works perfectly, however I am not sure why this is happening.
I use resolvers to pass information from the route to the component properly.
Thanks in advance.
Try to use this.updateForm.patchValue instead of this.updateForm.setValue.

Get all values for elements in a div

I have a for loop in and it generation id for div
i need to get all values for elements in a div when click any element at div
<div id="{{ item3.id }}" (click)="getChildren($event)">
<input type="checkbox" name="status" [checked]="item3.templatesFields.status"/>
<input type="checkbox" name="inMain" [checked]="item3.templatesFields.inMain" />
</div>
and this ts code
public getChildren(e) {
}
Try This
getChildren(e)
{
if (e.target.children.length!=0) {
var g=Array.from(e.target.children).forEach(y=>console.log(y.value))
console.log(g);//here your values
}
<div id="{{ item3.id }}" (click)="getChildren(ch1, ch2)">
<input type="checkbox" name="status" #ch1 [checked]="item3.templatesFields.status"/>
<input type="checkbox" name="inMain" #ch2 [checked]="item3.templatesFields.inMain" />
</div>
via TS you will see the nativeElement of both your checkboxes
getChildren(ch1: any, ch2: any){
console.log(ch1);
console.log(ch2);
}

[ng-bootstrap]: Open modal after calling api, ExpressionChangedAfterItHasBeenCheckedError

i'm using Angular, express (node).
I am opening a modal after validating the user's data at login (httpClient - express).
But when I open the modal (yes, the modal opens) I get an exception in the console:
ExpressionChangedAfterItHasBeenCheckedError:
Expression has changed after it was checked. Previous value:
'ng-untouched: true'. Current value: 'ng-untouched: false'.
Here is my basic code:
example.html
<ng-template #modalexample let-c="close" let-d="dismiss">
/** modal body **/
</ng-template>
form (ngSubmit)="f.form.valid && signin()" #f="ngForm" class="m-login__form m-form" action="">
<ng-template #alertSignin></ng-template>
<div class="form-group m-form__group">
<input class="form-control m-input" type="text" placeholder="Email" name="email" [(ngModel)]="model.email" #email="ngModel" autocomplete="off">
</div>
<div class="form-group m-form__group">
<input class="form-control m-input m-login__form-input--last" type="password" placeholder="Password" name="password" [(ngModel)]="model.password" #password="ngModel">
</div>
<div class="row m-login__form-sub">
<div class="col m--align-left">
<label class="m-checkbox m-checkbox--focus">
<input type="checkbox" name="remember" [(ngModel)]="model.remember" #remember="ngModel">
Remember me
<span></span>
</label>
</div>
<div class="col m--align-right">
<a href="javascript:;" id="m_login_forget_password" class="m-link">
Forget Password ?
</a>
</div>
</div>
<div class="m-login__form-action">
<button [disabled]="loading" [ngClass]="{'m-loader m-loader--right m-loader--light': loading}" id="m_login_signin_submit" class="btn btn-focus m-btn m-btn--pill m-btn--custom m-btn--air">
Sign In
</button>
</div>
</form>
And my component.ts
#ViewChild('modalexample', {read: TemplateRef}) modal: TemplateRef<any>;
signin() {
console.log("Signin")
this.modalService.open(this.content);
this.loading=true;
this._authUser.login(this.model.email, this.model.password).subscribe(
response=>{
if(!response.error){
this.loading=false;
}
else{
alert('Error');
}
this.loading=false;
},
error=>{
console.log(error)
this.loading=false;
}
)
}
How can I solve it?
Thank you :D