I have an ion-input field that has to use objects or nulls form the backend service and return the objects or nulls. I am able to do this but the input field will display [object Object] as expected.
object
{ContactRelationID: 345678, Name: Thomas}
ion-input shows [object Object]
<ion-input name=“test” [(ngModel)]="ContractorInput" readonly></ion-input>
ion-input shows Thomas with object but fails with null
<ion-input name=“test” [(ngModel)]="ContractorInput.Name" readonly></ion-input>
Is there anyway to suppress the null error when trying to bind to the [(ngModel)]="ContractorInput.Name" or view just view Thomas in the input and not [object Object]
There's really no need for two-way binding on an input for data that is "readonly". Forget [(ngModel)] and just assign the value directly. Use the ?. optional chaining operator so that if the value is null it will just be an empty input.
<ion-input name="test" value="{{ContractorInput?.Name}}" readonly></ion-input>
Related
I want to have a Slider and an Input control, both for one specific value.
The user should be able to use either the input field or the slider to input his value.
If the user changes the value on the Slider, the input field should show the Slider's value. And if the user inputs something in the input field, the Slider should move to the corresponding value.
Currently, I am creating a JSONModel with the value as a property to bind:
let model = new JSONModel({
valueName: 10
});
settings.setModel(model);
Now, when I am changing the value on the slider, the update of the input field is working fine. But if I'm entering a value in the input field, the Slider does not move to the value.
Why is that so and how do I solve my problem?
<Slider value="{/valueName}" step="10" width="200px" />
<Input value="{/valueName}" type="Number" width="50px" />
Since the given solutions only worked for integer values a follow up question for float values was created here
I was baffled by this at first. The reason appears to be that the value is saving as a string (in spite of you explicitly specifying number or clearly binding the value in the initial model to a numeric value).
I checked this by handling the liveChange event off the Input, retrieving the model value of valueName, doing a parseInt on the value and then setting the Slider to that value.
This causes the slider to update as I change the Input.
Controller:
handleChange: function(){
var slider = this.getView().byId("slider");
var val = this.getView().getModel().getProperty("/valueName");
slider.setValue(parseInt(val));
}
XML View:
<Slider id="slider" value="{/valueName}" min="0" max="100" step="10" width="200px" />
<Input textAlign="Center" value="{/valueName}" type="Number" width="50px" valueLiveUpdate="true" liveChange="handleChange"/>
The caveat was if I wanted to update the slider to, say, 70 I would need to key in the 0 first (as the slider settings as they stand convert the value to min (0) or 10 the moment I type a number - given the correct behaviour of liveUpdate). There are ways to work around this but I thought I'd get you the answer and you can figure out what to do from there.
Ultimately i think this is a bug. EDIT - this is not a bug - please refer comment by Boghyon below this Answer
The user should be able to use either the input field or the slider to input his value.
In case you were not aware, you could use the built in Tooltip input feature:
<Slider
showAdvancedTooltip="true"
showHandleTooltip="false"
inputsAsTooltips="true"
/>
Gives you this:
Slider awaits a value of type float.
The input field, however, evaluates inputs as string.
You can solve it declaratively by assigning an appropriate type to the binding info object:
Either assign sap/ui/model/type/String* to Slider's value binding type ⇒ Formats the string value from the model to a float type prior to passing the value to the Slider.
Float value manipulated from the Slider will be converted back to a string value before storing it in the model as a result of two-way binding with the String type.
Or assign sap/ui/model/type/Float* to Input's value binding type ⇒ Stores the value as number in the model. The Slider can then use the number value directly.
Here is a demo of the above approaches: https://jsbin.com/sodihub/edit?js,output
Using the type feature in binding will allow parsing, formatting, and even validating the model value before updating the control while still keeping the two-way data binding mode.
* In case of binding with ODataModel, require sap/ui/model/odata/type/Decimal|String instead!
I have a material form in which I have an MdInput:
<md-form-field class="input-full-width">
<input mdInput class="form-control" type="text" placeholder="Description" formControlName="periodDesc">
<md-error *ngIf="fb.get('periodDesc').errors.required">This field is required</md-error>
</md-form-field>
The validate message appears when the field has been touched but no text has been typed in. However, the validate message persists even when I try to type in text there:
Edit 1:
The issue gets fixed when I do this instead:
<md-error *ngIf="fb.hasError('required', ['periodDesc'])">This field is required</md-error>
However, my question is why did the issue occur in the first place? Is there anything wrong with the previous case because I am using it in other places where the second one won't work. Ref: Angular Material forms validation errors
The reason is that When a formControl has no validator errors(see here), fb.get('periodDesc').errors will return null. So your current way will throw null error like can not find required of null.
Use fb.get('periodDesc').hasError('required') instead of fb.get('periodDesc').errors.required to prevent from above error.
Is there a possibility to define own error messages for an input?
View
<Input id="inputReferenceId" change="handleChangeReferenceId" type="Text" />
I change the state this way:
Controller
handleChangeReferenceId: function(oEvent){
if(...)
this.byId("inputReferenceId").byId("inputReferenceId").setValueState(sap.ui.core.ValueState.Error);
//I need a own error message for the inputReferenceId input
}
}
I need a own error message like "Please fill in a valid Reference Number"
Is there a attribute like valueStateText or something?
It works. It was my fault. If the cursor leaves the field there is no valueStateText. onFocus the input field the text appears.
Here is a property:
valueStateText
Please check you SAPUi5 library version, as this valueStateText property is available from 1.26.0 onwards.
So, here is the warning:
Warning: UserInviteForm is changing an uncontrolled input of type checkbox to be controlled.
After looking at this ticket for reduxForm v5 and others, It seems that I am getting this warning because the initial value for the field is undefined and so the input value attribute needs to be initialized with either the fields value || "".
Do a little further research, controlled checkboxes need the checked attribute set to a value.
So my assumption is that the way to clear the warning would be to write the input tag in one of two ways:
<input
{...isPrimary}
value={isPrimary.value || ''}
type="checkbox"
>
OR
<input
{...isPrimary}
checked={isPrimary.checked || ''}
type="checkbox"
>
For good measure I also tried checked={isPrimary.checked || false} and value={isPrimary.value || false} and the combination of both together.
I even tried setting the checked and value property of the isPrimary on component mount but still nothing can get rid of the warning.
Also, I want to add, I know that there is a reduxForm v6 out, but this is the current version of our deployed app that we are working to fix and reduxForm v6 is coming in a future deployment version of our app.
Anyone got any insight to solving this problem?
I tried one more thing and figured out the solution.
I was able to get this to work by setting the initial value of the field when connecting the reduxForm, then set the value of the input to that intitial value.
UserInviteFormContainer = reduxForm({
form: FORM_ID,
fields: FIELD_NAMES,
initialValues: {
isPrimary: false,
},
validate,
})(UserInviteFormContainer);
<input
{...isPrimary}
value={isPrimary.initialValue || ''}
type="checkbox"
>
There's a place into my screen that I populate a label with a specific string value after some interaction with my user during the runtime. I use javascript for that.
Is there anyway to get the value of this lavel with my controller after its POST method is activated ?
Thanks, guys !
Option #1
Put the value in an HTML <input> element with a name attribute? Might need to dress down
the input element, since it will look like a textbox.
Option #2
Mirror the value in a hidden input <input type="hidden" value="yourValue" /> inside the form you're posting.