How can I bind Width of another element in Angular 2 - HTML? - angular

I have an input and a table.
<input type="search"/>
<table id="myTable"/>
How can I bind the width of my input to the same width of the table?
Something like this?
<input type="search" [style.width]="#myTable.width"/>

The reference in input tag should for the table template variable, not the id. # is not necessary when using it. You also need to retrieve the offsetwidth:
<input [ngStyle]="{'width.px': myTable.offsetWidth }">
<table #myTable>...</table>
DEMO

Related

There is some way to disabled set of inputs in angular 2?

I have some inputs in md-card.
there is a way to do like:
<md-card-content [disabled]="phone._id>
Instead each one?
tanks.
Yes, you can create a <fieldset> which, unlike other elements like <form>, accepts [disabled] property.
All these fields that require to be disabled together have to be place inside it, just like in the following example:
<fieldset [disabled]=[true]>
<input type="text" ...>
<input ...>
</fieldset>

Angular2 Form variable does not work without ngModel

I have the html below:
<form #f="ngForm">
<input type="text" name="dd" value="abc" (change)="foof(f.form.value)"/>
</form>
However, the f.form.value has nothing in it when foof function is called when I change the input text value.
Only if I add ngModel to the input element like below,
<input type="text" name="dd" [ngModel]="abc" (change)="foof(f.form.value)"/>
Then f.form.value has the dd input text value.
I don't understand why is this. Do I have to use ngModel to get the form variable to work right?
Note: For certain reasons in our app, we have to submit the whole form when the dd input is changed, so I do need foof(f.form.value). I also don't want two way binding, just one way binding due to variations between the model and the html layout.
I guess you could make a hack like this:
<form #f="ngForm">
<input type="text" id="someInput" value="abc" (change)="foof()"/>
</form>
and
x:any;
foof() {
this.x = document.getElementById("someInput");
console.log(this.x.value);
}
Don't know your app, so this (terrible) hack might not at all suit your needs.
I don't think this is how you're supposed to be binding to an input field.
You should be doing it like this,
<input type="text" name="dd" [(ngModel)]="abc" (ngModelChange)="foof(abc)"/>

How to add id attribute to a div-EXTJS3

I have a component whose 'id' is auto-generated. I want to replace that id with my own for styling purposes. I'm unable to use class for styling as the class is used by bunch of other components.
Ext.query('.q-superdate-field')
that results into:
<input type="text" size="16" autocomplete="off" id="ext-comp-1100" name="ext-comp-1100" class="x-form-text x-form-field q-superdate-field x-form-empty-field x-trigger-noedit" readonly="" style="width: 100px;">
I want to change the width of the input field using id. Is there a way to replace exisiting 'Id' and create one of our own
to change id dynamically
Ext.select('.q-superdate-field').elements[0].id = 'newId';
Note: this is not best approach my answer is just for you question.

inputs are not considered in form validation when using ng-content

Given the following component (with selector my-template):
<form #theForm="ngForm">
<ng-content></ng-content>
</form>
and use it like this:
<my-template>
<input type="text" required name="firstName" [(ngModel)]="firstName"/>
</my-template>
The form is always valid - even though the input is invalid. How can I make this work so that the form is invalid when the input is invalid?
Live demo:
https://plnkr.co/edit/lWUe6oeBk6ccsE2JxNKb?p=preview
Just for test purposes, try to change your form template to:
<form #theForm="ngForm">
<input type="text" required name="lastName" [(ngModel)]="lastName"/>
<ng-content></ng-content>
</form>
You will see, that form becomes invalid when lastName is invalid. Which means that FormComponent processes own HTML elements fields before ng-content is rendered. I.e. you have to update FormControls after template is rendered.
Please read this topic Dynamic Form for more information

Angular 4 - Can I create a form dynamically with ngFor?

I'm trying to dynamically create an editable form with ngFor. Basically, a data grid and that's what I'd be using some other systems--maybe that's the way I should go, but I tried this first.
<form #employeeForm="ngForm">
<tr *ngFor="let employee of newEmployees | filter:filterCriteria; let i = index" [class.active]="i == selectedRow" [attr.rowIndex]="i">
<td class="clickable" (click)="showEmployee(i)">
<div>{{employee.avatar}}</div>
</td>
<td>
<md-input-container dividerColor="accent" >
<input mdInput placeholder="name" value={{employee.name}} name="employee-name-{{employee.id}}" [(ngModel)]="employee-name-{{employee.id}}"/>
</md-input-container>
</td>
...
<td>
<md-icon (click)="saveEmployeeChanges(employee.id)">save</md-icon></td>
</tr>
</form>
Am I barking up the wrong tree here? If this can work, how do I access each input fields (there would be more) from within the component? And how do I get the values of every field in the row (not just the one that changed last).
There are many ways to solve this problem.
Have you seen this as an example: https://angular.io/guide/dynamic-form
But what you have is an option as well. You can change this:
<md-icon (click)="saveEmployeeChanges(employee.id)">
to this:
<md-icon (click)="saveEmployeeChanges(employeeForm)">
That will pass the form and all of its associated controls to your component class.
To access the controls on the form you can use:
employeeForm.get('name').value;
You can find out more in the Angular docs here: https://angular.io/guide/reactive-forms#inspect-formcontrol-properties

Resources