I have got simple question: how to create binding between button and textarea? I see that like:
html
<textarea [value]="test"> <button (click)="onclick($event)>
ts
onclick(event: Event) {
this.test = ($event.HowToChooseTarget as HTMLInputElement).value;
}
As you can see, the problem is to choose target element there. How to do this?
Thank you for any help.
There are multiple ways to achieve this.
With help of template ref variable
<textarea #test [value]="test"> <button (click)="onclick(test.value)>
Use ngModel and directly access the value in your component file with "this.test"
<textarea [(ngModel)]="test"> <button (click)="onclick($event)>
Related
I'm trying to send the id of a element from html to the function, this because it changes in the ts, so I have a click function but function(this.id) doesnt work
here is my code
the html
<button id="btnNext" class="btn" (click)="nextGeneral(this.id)">next</button>
the ts
nextGeneral(id:number){
alert(id)
}
If I understand correctly, you want the id attribute from the <button> (i.e. btnNext) to be passed into the nextGeneral() function (although this function is currently expecting a number not a string, so correct me if I'm wrong).
This is how you could achieve that dynamically:
.html
<button id="btnNext" class="btn" (click)="nextGeneral($event)">next</button>
.ts
nextGeneral(event: PointerEvent){
const id: string = (event.target as HTMLElement).id
alert(id)
}
this is not available inside a template. You might want to use 'btnNext' as the parameter instead, but its too vague from your description.
So replace the template's (click)=nextGeneral(this.id) with (click)=nextGeneral('btnNext') and it will work and also might fit your requirements. Does it fit?
Stackblitz
One of the cleanest way to achieve it is by using template reference in angular.
<button id="btnNext" #myButton class="btn" (click)="nextGeneral(myButton)">next</button>
Inside your nextGeneral
nextGeneral(button: HTMLButtonElement) {
alert(button.getAttribute('id'));
}
Running Solution - https://stackblitz.com/edit/angular-ivy-ohxfa5?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts
I have one form template driven i am handling it using id like #firstname and then using ngModel.so basically i want once the code gets validated it should let the button know to get enabled or diabled which is present outside the component.
Note: i am not using form tag here
Using form
If your component has a template variable
<form #form="ngForm">
...
</form>`
You can get it (and expose as public property of your component)
using ViewChild
#ViewChild('form') form:NgForm
Now in your parent, can access to the form if you access to the
child
<app-child #child ></app-child>
<button (click)="submit(child.form.form)">submit</button>
submit(form:FormGroup)
{
if (form.valid)
this.result=form.value;
else
this.result="Invalid form"
}
Using simple control
<input name="name" [(ngModel)]="name" #nameID="ngModel" required>
The ViewChild
#ViewChild('nameID') control:FormControl
Your parent like
<child-control #childControl></child-control>
<button (click)="submitControl(childControl.control)">submit</button>
submitControl(control:FormControl)
{
if (control.valid)
this.result=control.value;
else
this.result="Invalid control"
}
A stackblitz
I'm trying to make an Edit button, with an input field that appears/disappears when the button is pressed. It was working previously, however when I tried to make a Display form, it doesn't seem to recognize the "title.value" This is very strange. I'm using Boolean for an "edit" variable combined with a *ngIf to show/hide the form. If I take the *ngIf="edit" off, it works normally as a form that displays what you're written. Am I missing something?
Here's the HTML:
<input type="text" #title *ngIf="edit"/>
<button (click)="edit = !edit">Edit</button>
<button (click)="getTitle(title.value)">Get Title</button>
<h2>{{groupTitle}}</h2>
and here's the .ts:
public edit = false;
public groupTitle = "";
getTitle(val) {
this.groupTitle = val;
}
You have a problem with implementing together the ngIf directive and a reference to your input element as #title. In that case you can use hidden instead of ngIf.
Here's your html:
<input type="text" #title [hidden]="!edit"/>
<button (click)="edit = !edit">Edit</button>
<button (click)="getTitle(title.value)">Get Title</button>
<h2>{{groupTitle}}</h2>
There are couple more elegant ways to bind a value and render it on a page.
The first one is to get rid of the Get title button and use (input) method directly on an input element.
In that case, Html looks like:
<input type="text" #title *ngIf="edit" (input)="getTitle(title.value)"/>
<button (click)="edit = !edit">Edit</button>
<h2>{{groupTitle}}</h2>
The second one is to use [(ngModel]) instead of the getTitle method and bind your input value directly to the groupTitle variable.
Html will look like:
<input type="text" #title *ngIf="edit" [(ngModel)]="groupTitle"/>
<button (click)="edit = !edit">Edit</button>
<h2>{{groupTitle}}</h2>
Your .ts file:
edit = false;
groupTitle = "";
I have an html form ( ) , I want that it is displayed when I click on a button.
the declaration of the form is the following :
<div id = "formulaire" class="gl" >
and the button is :
Edit
I use angularjs in my code . Please help me.
It better to use a simple variable than a function in this case. I would also recommend using controller scope when setting variables instead of the application scope so you don't run into issues with the variables when your application becomes large.
I also picked data-ng-click over ng-click because it will allow the html to validate correctly (which can be checked using the W3's validator).
Try this...
"use strict";
angular.module('myApp', [])
.controller("myController", function() {
this.edit = false;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div data-ng-app="myApp" data-ng-controller="myController as ctrl">
Edit
<div id="formulaire" class="gl" data-ng-show="ctrl.edit">
<form>
<fieldset>
<label>Field:</label>
<input type="text" />
</fieldset>
</form>
</div>
</div>
Have you looked into the ngShow directive? It ables you to show or hide a DOM element depending on whether the attribute expression resolves to a truthey or falsey value.
Add model change on click
Edit
And then display the form if model is true
<div id = "formulaire" class="gl" ng-if="show">
I have defined a custom DOM element, but when placed inside a form, it does not submit it. How can I get the form to submit when I click the button?
<form action="/foo" method="GET">
<my-button type="submit">click me</my-button>
</form>
This is the prototype configuration for the custom element:
myButton = Object.create(HTMLButtonElement.prototype);
The template for the button looks like this:
<template>
<button type="submit" id="button"><content></content></button>
</template>
Came across this question today, but found a more modern alternative subsequently: web components can now be native form elements. There's a great read on the topic here.
The long and the short of it is you can now associate custom components with a form, meaning they're included in the form's elements property - a HTMLFormControlsCollection of all the elements controlled by the form.
To do this, you need to add the following to your component:
class MyComponent extends HTMLElement {
static get formAssociated() { return true; }
constructor() {
super();
this.internals = this.attachInternals();
}
}
this.internals will then contain everything you need to interact with the form in question, e.g. this.internals.form, this.internals.setFormValue(), this.internals.checkValidity().
For the submit button, you could, for example, use:
connectedCallback() {
const { internals: { form } } = this;
this.buttonEl.addEventListener('click', () => form.submit());
}
You are doing it wrong. Though event bubbling from shadow DOM to owner document is somehow possible, it’s tricky and in general is a wrong approach. Instead of hiding button into shadow, one should use is= attribute of button:
<form action="/foo" method="GET">
<!--my-button type="submit">click me</my-button-->
<!-- ⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓⇓ -->
<button type="submit" is="my-button">click me</button>
</form>
More info.
When your custom element extends a native element like HTMLButtonElement, you can no longer use a custom tag name like <my-button> (unfortunately). You have to use the native tag with the is= attribute:
<button type="submit" is="my-button">
If you do not extend a native element (called "type extension" in the spec), then you can use your custom tag name. Type extension example in the spec