I'm trying to translate a value in an input. The input is disabled when I need to translate it so the user can't type text in the textbox. The data is inputted using ng-model and currently looks like this:
<input ng-model="reason" ng-disabled="true" type="text" class="form-control" name="reason">
I've also tried the following:
<input ng-model="reason|translate" ng-disabled="true" type="text" class="form-control" name="reason">
<input ng-model="{{ reason | translate}}" ng-disabled="true" type="text" class="form-control" name="reason">
but none of them worked.
I could translate the value in the controller, but I'd like to do this in the html tags so the actual value on the scope doesn't get changed.
How can I achieve this?
You can use ng-value for inputs instead of the HTML input>value. Then you can translate them easily:
<input ng-value="ctrl.reason | translate" ng-model="ctrl.reason">
I got it working with this example: think about an input with a Yes or No value that you want to be translated. Try one way data-binding in your template:
<input value="{{ answer | translate }}"
type="text" class="form-control" name="answer"
(change)="answerChanged($event)">
If you also want to update the value, listen for changes in the component:
answerChanged(Event event) {
this.answer = event.target.value.toUpperCase();
}
Regarding the i18n files.
en.json:
{
"YES": "Yes",
"NO": "No"
}
fr.json:
{
"YES": "Oui",
"NO": "Non"
}
Plunker:
http://plnkr.co/edit/BeYBAWG57eIZOU3KdBCD
Related
<input *ngIf="authService.user$ | async as user" type="text" id="nane" name="name" class="form-control" formControlName="name" [ngClass] = "{'error': isInvalid('name')}" **value = {{user.name}} />**
Hi, I'm trying to get my input box to default to the user's name however when I use value it doesn't work but other commands work like if I'm using placeholder, it'll use the user.name value. In the value's case, it just stays empty.
I would like to have 2 mutually exclusive fields.
One will be a FileField and other TextBoxField.
Is there a ready html form I can get my hands on to.
I have searched the web and couldnt find any.
Oh I am a little sorry..
I meant that I wanted to do this via Django Templates
You can make an onInput event listener and handle it using javascript, so that if the user types in one field it empties the other.
For example:
<form>
<label for="first">Fill This:</label>
<input type="text" name="first" id="first" oninput="run('first')"><br><br>
<label for="second">Or This:</label>
<input type="text" name="second" id="second" oninput="run('second')"><br><br>
<input type="submit" value="Submit">
</form>
<script>
function run(activeField) {
if (activeField == 'first') {
const second = document.querySelector('#second')
second.value = ''
} else {
const first = document.querySelector('#first')
first.value = ''
}
}
</script>
For Your textbox, you can use this:
<input type="text" name="name" placeholder="Please enter your name">
And for your files:
<input type="file" name="fileName">
But for file name it needs to be encrypted. HTML won't let you submit a form with a file. But you can override this in the form attr, like this:
<form action="dirToForm.py" method="POST" enctype="multipart/form-data"></form>
I have this below where birthDate is "1938-08-08T00:00:00" and I want it to be "dd/MM/yyyy", but I can't seem to figure out how to use the Angular date pipe in ngModel.
<input type="text" class="form-control" placeholder="ex. MM/DD/YYYY" [(ngModel)]=matterData.birthDate name="birthDate">
I tried this with no luck:
[(ngModel)]={{matterData.birthDate | date: 'dd/MM/yyyy'}}
The only way I can get it to work is if I format the date in the .ts code first with Angular 'formatDate()'
I don't understand why you want to format it inside a ngModel.
One way data binding (Interpolation {{}})doesn't work inside a two way databinding. If you want to use pipe, I would instead suggest to use a value attribute instead of ngModal.
Your HTML should look like:
<input type="text" class="form-control" placeholder="ex. MM/DD/YYYY" [value]="matterData.birthDate | date: 'dd/MM/yyyy'" name="birthDate">
Here is a live example for the same. https://stackblitz.com/edit/angular-ubpthb
On Angular 9, this works for me, with two way binding:
<input type="date" class="form-control" name="birthDate" [(ngModel)]="matterData.birthDate" [ngModel]="matterData.birthDate | date:'dd/MM/yyyy'" required>
Ref - Using Pipes within ngModel on INPUT Elements in Angular
<input type="text" class="form-control" placeholder="ex. MM/DD/YYYY" [ngModel]="matterData.birthDate | date: 'dd/MM/yyyy'" (ngModelChange)="matterData.birthDate=$event" name="birthDate">
<input [(ngModel)]="newVariablesAttribute.Steps"
class="form-control"
type="text" readonly
name="{{newVariablesAttribute.Steps}}">
{{stepname}}
I want to pass stepname (which I am able to show in the frontend using interpolation) using ngModel.
But It is not working.
Didn't find any issue with your code. Steps might be undefined
Component
export class SomeComponent {
newVariablesAttribute = {
Steps: 'step'
};
stepname = 'abc';
}
html:
<input [(ngModel)]="newVariablesAttribute.Steps" class="form-control" type="text" readonly name="{{newVariablesAttribute.Steps}}">{{stepname}}
O/P
Since stepname is getting rendered in the UI, you can pass it to the ngModel directly like this right -
<input [(ngModel)]="stepname"
class="form-control"
type="text" readonly
name="{{newVariablesAttribute.Steps}}">
{{stepname}}
(I guess newVariablesAttribute.Steps are some array of objects. )
<input id="isChecked" name="isChecked"
type="checkbox"></input><input name="_isChecked"
type="hidden" value="on"></input> <label for="isChecked">Checked</label>
I have this checkbox on the top of my *.html.
I want to use the value of "isChecked" input in a "form" like seting 1/0 (true/false) to a hidden input:
<form id="someForm" class="form xml-display form-inline"
th:action="#{/doSomething}" method="post">
.....
<input type="hidden" name="isChecked"
th:value="GET VALUE FROM THE GLOBAL CHECKBOX" />
.....
</form>
So can I do this without any JS?
Should I add an object in my java controller to the Model so I can set the value from the "isChecked" checkbox to it and then use the object in th:value="${objectFromJavaController}" for the hidden input ? I tried setting a th:object="${objectFromJavaController}" for the checkbox and then passing it to the hidden input but it didn't work (th:value = ${"objectFromJavaController"}) ?
So can someone help me ? Thanks in advance!
Surely somethin like this is simple enough?
<input id="newsletter" name="newsletter" type="checkbox" checked="yes" value="yes"/>
This brings back the same result. anything else would be no. (with PHP code telling them apart)