Angular 2 simple directive file upload - javascript

I have some simple directive for styling file upload in Angular CLI, only problem i have is that i use ID, and my directive works when is single on page, but when i have several upload fields of course it will not work.
Here is my code
upload-field.component.ts
import { Component, OnInit, Input } from '#angular/core';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
#Component({
selector: 'app-upload-field',
templateUrl: './upload-field.component.html',
styleUrls: ['./upload-field.component.scss']
})
export class UploadFieldComponent implements OnInit {
#Input() labelName = 'Blader';
#Input() placeHolderValue = 'Kies bestand';
constructor() { }
ngOnInit() {
}
uploadButton() {
const inputValue = (<HTMLInputElement>document.getElementById('upload-button')).value;
const filename = inputValue.replace(/^.*\\/, '');
(<HTMLInputElement>document.getElementById('upload-file')).value = filename;
}
}
upload-field.component.html
<input id="upload-file" placeholder="{{placeHolderValue}}" disabled="disabled" class="form-control" />
<div class="file-upload">
<span class="btn btn-default btn-lg">{{labelName}}</span>
<input id="upload-button" type="file" class="form-control upload-button" name="upload_file" (change)="uploadButton()" />
</div>

Related

Angular template-driven form: passing data from child component inputs to parent form?

Seems like this should be a common scenario, but I keep reading conflicting instructions on how to perform it. I have a three child components, each with a series of input controls, that feed into a parent component; however, the parent component never receives the child component's input. My current code is inserted below; sorry if it's a little incomplete, but as I said, I've been reading conflicting theories on how to do this. Thanks in advance!
Child template #1 (partial):
<input type="text"
pInputText
name="name" id="name"
ngModel #name="ngModel"
required [minlength]="5" [maxlength]="40"
placeholder="First LastName"
(change)="onNameEntered($event)">
Child component:
import { Component, EventEmitter, Input, OnInit, Output } from '#angular/core';
import { DropdownOptions } from 'src/assets/dropdownOptions';
import { ApplicantInformation } from 'src/app/_models/applicantInformation.model';
#Component({
selector: 'app-applicant-information',
templateUrl: './applicant-information.component.html',
styleUrls: ['./applicant-information.component.css']
})
export class ApplicantInformationComponent implements OnInit {
name: string = '';
phone = '';
address = '';
city = '';
state = '';
zipCode = '';
options: any = new DropdownOptions;
sts: string[] = [];
#Input() ngModel: any = new ApplicantInformation(this.name,this.phone,this.address,this.city,this.state,this.zipCode)
#Output() nameEntered = new EventEmitter<{ $event: any }>();
onNameEntered($event: any) {
this.nameEntered.emit({$event});
}
constructor() {
this.sts = this.options.strAbbrs;
}
ngOnInit(): void {
}
}
Parent template (partial):
<form #onePlusThreeColumnForm="ngForm">
...
<app-applicant-information
(nameEvent)="receiveName($event)"></app-applicant-information>
...
<button
type="submit"
class="p-button p-component"
[disabled]="!onePlusThreeColumnForm.valid"
(click)="login(onePlusThreeColumnForm)">
Submit
</button>
</form>
Parent component:
import { Component, OnInit, ViewChild } from '#angular/core';
import { ApplicantInformation } from 'src/app/_models/applicantInformation.model';
import { BiometricInformation } from 'src/app/_models/biometricInformation.model';
import { ThreeColumn } from '../../_models/threeColumn.model';
import { NgForm } from '#angular/forms';
#Component({
selector: 'app-one-plus-three-column-form',
templateUrl: './one-plus-three-column-form.component.html',
styleUrls: ['./one-plus-three-column-form.component.css']
})
export class OnePlusThreeColumnFormComponent implements OnInit {
firstColumnInformation: any = new ApplicantInformation('','','','','','');
secondColumnInformation: any = new BiometricInformation('','',0,0,0,'');
thirdColumnInformation: any = new ApplicantInformation('','','','','','');
constructor() {
}
model = new ThreeColumn(
this.firstColumnInformation,
this.secondColumnInformation,
this.thirdColumnInformation
);
ngOnInit(): void {
}
name: string = '';
receiveName($event: any) {
this.name = $event;
}
login(thisForm: NgForm) {
console.log(this.model);
console.log(JSON.stringify(thisForm.value));
}
}
Console result:
(nameEvent)="receiveName($event)"
should be the name of your EventEmitter, ie
(nameEntered)="receiveName($event)"

pass html input element variable to shared component

Hello I have two components. Component 1 has a input-element to upload videos. It has a variable file
<input
type="file"
accept=".mp4"
#file
/>
Now I have Component2 which is a shared component:
<button (click)="file.click()">upload video</button>
Now I need the "file" variable passed to the shared component to execute the file.click();
I can't take the input element in the shared component
https://stackblitz.com/edit/angular-ivy-9wi6qs?file=src/app/component1/component1.component.html
This is as simple as sending the value into the component:
#Component({
selector: 'app-component1',
templateUrl: './component1.component.html',
styleUrls: ['./component1.component.css']
})
export class Component1Component implements OnInit {
constructor() { }
public fileAddress: string;
public fileChanged(event) {
// read the file when it changes and store it locally
if(event.target.files.length > 0)
this.fileAddress = event.target.files[0].name;
}
}
ngOnInit() {
}
}
<!-- bind the event handler -->
<input type="file" accept=".mp4" (change)="fileChanged($event)" />
<!-- bind the local variable to an input on the child component -->
<app-upload-video [fileAddress]="fileAddress"></app-upload-video>
#Component({
selector: 'app-upload-video',
templateUrl: './upload-video.component.html',
styleUrls: ['./upload-video.component.css']
})
export class UploadVideoComponent implements OnInit {
//input variable to receive the value inside the component
#Input()
public fileAddress: string;
constructor() { }
ngOnInit() {
}
}

Component communication in Angular fails from child to parent component

I am trying to apply #Output in my sample project following this tutorial. I am unable to get it working. There are no compilation errors or any specific error for this in console. I am unable to figure out how to proceed with debugging #Output using developer tools. Below are my files.
app-component.ts
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
serverElements = [{type: 'server', name: 'testServer', content: 'Just a Server'}];
constructor(){
console.log(this.serverElements);
}
onServerAdded(serverData: {serverName: string, serverContent: string}) {
console.log("Server Added");
this.serverElements.push({
type: 'server',
name: serverData.serverName,
content: serverData.serverContent
});
console.log("Server Added");
}
onBlueprintAdded(blueprintData: {serverName: string, serverContent: string}) {
this.serverElements.push({
type: 'blueprint',
name: blueprintData.serverName,
content: blueprintData.serverContent
});
}
}
app-component.html
<app-cockpit (serverAdded)="onServerAdded($event)"
(blueprintAdded)="onBlueprintAdded($event)"></app-cockpit>
<hr>
<div class="row">
<div class="col-xs-12">
<app-server-element *ngFor="let serverElement of serverElements" [element] = "serverElement"></app-server-element>
</div>
</div>
</div>
cockpit-component.ts
#Component({
selector: 'app-cockpit',
templateUrl: './cockpit.component.html',
styleUrls: ['./cockpit.component.css']
})
export class CockpitComponent implements OnInit {
#Output() serverAdded = new EventEmitter<{serverName: string, serverContent: string}>();
#Output() blueprintAdded = new EventEmitter<{blueprintName: string, blueprintContent: string}>();
newServerName = '';
newServerContent = '';
constructor() { }
ngOnInit(): void {
}
onAddServer() {
console.log(this.newServerContent);
console.log(this.newServerName);
this.serverAdded.emit({
serverName:this.newServerName,
serverContent:this.newServerContent
});
}
onAddBlueprint() {
this.blueprintAdded.emit({
blueprintName:this.newServerName,
blueprintContent:this.newServerContent
});
}
}
cockpit-component.html
<div class="col-xs-12">
<p>Add new Servers or blueprints!</p>
<label>Server Name</label>
<input type="text" class="form-control" [(ngModel)]="newServerName">
<label>Server Content</label>
<input type="text" class="form-control" [(ngModel)]="newServerContent">
<br>
<button
class="btn btn-primary"
(click)="onAddServer()">Add Server</button>
<button
class="btn btn-primary"
(click)="onAddBlueprint()">Add Server Blueprint</button>
</div>
</div>
I can see the console prints in the browser for cockpit-component.ts file but this does not lead to a call to onServerAdded() method in app component.
It works now after starting angular and vscode again

Angular 5.2 - bypass form validation for [routerLink] while keeping focus

I have completely reworded this question and included a complete code sample.
I have an intermittent issue where clicking the button sometimes shows the validation error message, instead of executing the router.nagivate command. Then, I have to click it a second to work. As I said, this is intermittent. The solution needs to include the focus behavior of the sample below, or an alternative way to focus on input html tags. Sometimes, I only have to click once. Why? And, how can I control this behavior so that it is not random?
I am posting two test components to demonstrate the issue. Any help would be greatly appreciated.
test.component.html
<form novalidate #f="ngForm">
<h2>Scan Part</h2>
<input id="partNum" type="number" class="form-control" required [correctPart]="orderShipDetail?.UPC" name="partNum" [(ngModel)]="model.partNum" #partNum="ngModel" #partNumRef />
<div *ngIf="partNum.invalid && (partNum.dirty || partNum.touched)" class="text-danger">
<p *ngIf="partNum.errors.required">PartNum is required.</p>
<p *ngIf="partNum.errors.correctPart">Please scan the correct part. </p>
</div>
<button type="button" (click)="onClickCartonPartButton()">Carton Parts</button>
</form>
test.component.ts
import { Component, OnInit, AfterViewChecked, ViewChild, ElementRef } from '#angular/core';
import { Router } from '#angular/router';
class TestForm {
constructor(
public partNum: string = '') {
}
}
#Component({
selector: 'test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit, AfterViewChecked {
#ViewChild('partNumRef') partNumRef: ElementRef;
model: TestForm = new TestForm();
public focusedElement: ElementRef;
constructor(
private router: Router,
private route: ActivatedRoute
) { }
ngAfterViewChecked() {
this.focusedElement.nativeElement.focus();
}
ngOnInit() {
this.focusedElement = this.partNumRef;
}
onClickCartonPartButton() {
try {
this.router.navigate(['/test2', 1006, 1248273, 1234]);
} catch (ex) {
console.log(ex);
}
}
}
test2.component.html
<a [routerLink]="['/test', 1006, 1248273, 1234, 5 ]">click this</a>
test2.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'test2',
templateUrl: './test2.component.html',
styleUrls: ['./test2.component.scss']
})
export class Test2Component implements OnInit {
constructor() { }
ngOnInit() {
}
}
Add these routes to the app.module.ts
{ path: 'test/:empId/:orderNumber/:licensePlate/:orderLine', component: TestComponent },
{ path: 'test2/:empId/:orderNumber/:licensePlate', component: Test2Component },
Set type="button" on the two hyperlinks to avoid submit
A button element with no type attribute specified represents the same
thing as a button element with its type attribute set to "submit".
Or put the two hyperlinks outside of the form
Remove partNum.touched from *ngIf in the validation message div, like this...
<div *ngIf="partNum.invalid && partNum.dirty" class="text-danger">
<p *ngIf="partNum.errors.required">PartNum is required.</p>
<p *ngIf="partNum.errors.correctPart">Please scan the correct part.</p>
</div>

how to hide a form in angular

I have been trying to hide my form and making it appear only when user click on the button. but for some reason, the function I have created never work is there something wrong with my code? and I saw quite a few example that uses angular.module and I tried it but I always get an error message.
transfer.component.html
<form [formGroup]="AddRiciverForm" id="AddRiciverForm" (ngSubmit)="addRiciverFunc()" *ngIf="show">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<p><input type="email" id="emailTo" formControlName="emailTo" placeholder="Reciver Email" [(ngModel)]="this.AddRiciverForm.value.emailTo" required></p>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<p><button class="btn btn-primary" type="submit" [disabled]="!transferForm.form.valid">Add</button> </p>
</div>
</div>
</div>
</form>
<button ng-click="AddEmailFunc()">add user</button>
transfer.component.ts
import { Component, OnInit } from '#angular/core';
import { AuthService } from '../auth.service';
import { FormBuilder, FormGroup } from '#angular/forms';
import { Router } from '#angular/router';
import { Http } from '#angular/http';
import { PostsService } from '../posts.service';
#Component({
selector: 'app-transfer',
templateUrl: './transfer.component.html',
styleUrls: ['./transfer.component.css']
})
export class TransferComponent implements OnInit {
constructor(private fb: FormBuilder, private http: Http, private router: Router, private auth: AuthService,private postsService: PostsService) { }
transfer = {};
addRiciver = {};
recivers: any;
AddRiciverForm: FormGroup;
transferForm: FormGroup;
public userEmail: string;
show=false;
ngOnInit() {
this.transferForm = this.fb.group({
emailTo: '',
amount: ''
});
this.AddRiciverForm = this.fb.group({
emailTo: ''
});
this.auth.currentEmail.subscribe(email => this.userEmail = email);
this.postsService.getAllReciver().subscribe(reciver => {
this.recivers = reciver;
});
}
transFunds(){
}
addRiciverFunc(){
this.addRiciver={
emailFrom: this.userEmail,
emailTo: this.AddRiciverForm.value.emailTo
}
this.http.post('/transfer', this.addRiciver)
.subscribe(res => {
let id = res['_id'];
}, (err) => {
console.log(err);
}
);
}
AddEmailFunc(){
if(!this.show){
this.show = true;
}
}
}
You must try adding [hidden]="AddEmailFunc()" on your form.
please see my sample code
import { Component } from '#angular/core';
#Component({
selector: 'Sandbox',
template: `<form [hidden]="isDisplayed">
<label>Sample: </label>
<input type="text">
</form>
<button (click)="showMe()">Click</button>`
})
export class SandboxComponent{
isDisplayed = true;
showMe()
{
if(this.isDisplayed)
{
this.isDisplayed = false;
}else{
this.isDisplayed = true;
}
}
}
Hope it helps. :) cheers!
You are mixing angularjs (1.x) and angular (>2)
the ng-click in Angular should be:
<button (click)="AddEmailFunc()">add user</button>
If this does not solve your issue please post the full component.
you can use *ngIf in and (model) binded to event click of button.
<button (click)="changeView()">add user</button>
and clickEvent
changeView(){
this.showForm = !this.showForm;
}

Categories