I'm utilizing the ng2-bootstrap datePicker, and whether I leave the initial value undefined, or if I use the initDate, I get an unexpected behavior.
Right away upon loading the page the variable bound to ngModel of the directive, in my case:
[(ngModel)]="campaign.startDate"
campaign.startDate logs as:
FIRST - today, or an assigned value if I set it arbitrarily in the ngOnInit
THEN - takes on the value I have assigned it once my request comes back with a new value
THEN - today
I have no idea what triggers that third step, and as far as I can tell it's not coming from my code, but due to the 2 way binding, the datePicker itself for some reason is assigning it a value of "today"
TS
getCampaign(id:number){
this._campaignService.getCampaignById(id)
.subscribe(
campaign => {
this.campaign = campaign;
}
)
}
ngOnInit(){
this.campaign = {
startDate:new Date()
}
this.getCampaign(4);
}
and HTML
<datepicker [(ngModel)]="campaign.startDate" [showWeeks]="true"></datepicker>
Related
I'm building a form using Ionic 6, React 18 and react-hook-form 7.37.0.
My form includes a field where a datetime needs to be set, which is implemented with IonDatetime.
Using minuteValues parameter I limit the user to select minutes values in 5 minutes increments.
This works fine. However, IonDatetime is including a default time that does not follow this restriction, any minute value can appear as default. I'd like to have a valid minute value as a default value. I have tried to set a default valid time with value parameter but I've found out that it interferes with the use of the watch function of react-hook-form.
If I watch the IonDatetime field, I cannot set any other value than the default value. Here there is a minimal example of this.
I also leave here the most relevant part of the code.
const birthTime = watch("birthTime");
<IonItem {...register("birthTime")} button={true} id="open-datetime">
<IonLabel>Birth time</IonLabel>
{birthTime !== "" ? (
<IonText>
{format(parseISO(birthTime!), "dd MM yyyy HH:mm")}
</IonText>
) : (
<IonText class="placeholder">Select a date</IonText>
)}
<IonModal ref={modal} trigger="open-datetime">
<IonContent>
<IonDatetime
min="2022-09-18T12:23"
max="2022-10-12T17:22"
value="2022-09-23T15:00"
minuteValues="0,5,10,15,20,25,30,35,40,45,50,55"
onIonChange={(ev: any) => {
setValue(
"birthTime",
dateFormat(
(ev.detail.value as unknown) as Date,
"yyyy-mm-dd'T'HH:MM"
)
);
}}
/>
<IonButton
onClick={() => {
dismiss();
}}
>
Close
</IonButton>
</IonContent>
</IonModal>
</IonItem>
I would like to validate a list of items(strings) and make sure there isn't a duplication(if there is, show error message) when user tries to modify the item. However, if the user try to modify it and finally keep the same value, we don't show the error message. In validation, I have something like below for each field in the array. In the function inside test below, I can only get current modified value as parameter - value, but not previous value so I cannot do validation with previous value. I would like to know if there is a way to get previous value(i.e. value before any change) for the value currently been modified? If there is only one value in the list, it is easy, but if there are multiples, it is hard to track.
Yup.object().shape({
rows: Yup.array(
Yup.lazy(() => (
myObject.test('field', 'error message', function (value) { ... } )
)
)
)
})
I wrote a function to update Validator rules on an input if a certain option was selected, using this method (the forms are built using FormGroup):
onValueChanged(data : any) {
let appVIP1 = this.vip1TabForm.get('option1');
let appVIP2 = this.vip2TabForm.get('option2');
let appVIP3 = this.vip3TabForm.get('option3');
//Set required validation if data is 'option3'
if(data != 'option3') {
//Due to initialization errors in UI, need to start with the case
//That there are validations, check to remove them
appVIP1.setValidators([]);
appVIP2.setValidators([]);
appVIP3.setValidators([]);
}
else {
appVIP1.setValidators([Validators.required]);
appVIP2.setValidators([Validators.required]);
appVIP3.setValidators([Validators.required]);
}
}
And I bind that function call to a click event on radio buttons (I initially used the guide from this answer, but the onChange function didn't bind correctly).
This works great, and if the user selects option 1 or 2, the validations are empty, and won't be triggered. If they select option 3, the validations are shown and submission is stopped. However, I run into the problem where the user submits, sees the error, and goes back to change to option 1 or 2. While the validator is cleared, my form still reads as invalid. I have multiple input fields I am validating, so I can't just set the form to valid if the validator is removed this way. How would I go about doing this? Can I remove the has-error for one particular field in the formgroup?
If the correct validators are in place, you can manually call AbstractControl#updateValueAndValidity after they select an option:
this.formBuilder.updateValueAndValidity();
(Where, of course, this.formBuilder is your FormBuilder instance.)
You can also call it on FormElements directly.
This is commonly used to trigger validation after a form element's value has been programmatically changed.
Instead of removing and adding validations. It is more simple to enable and disable fields. You need to add the Validators.required for all required fields. And disable the fields which are not required.
onValueChanged(data : any) {
let appVIP1 = this.vip1TabForm.get('option1');
let appVIP2 = this.vip2TabForm.get('option2');
let appVIP3 = this.vip3TabForm.get('option3');
if(data != 'option3') {
appVIP1.disable();
appVIP2.disable();
appVIP3.disable();
}
else {
appVIP1.enable();
appVIP2.enable();
appVIP3.enable();
}
}
I'm trying to check if I'm binding a null data on a controller. If the data is null, I need to not show the label as well as the binded data.
Below is my code right now.
var oMatNrRow1 = new sap.ui.commons.layout.MatrixLayoutRow();
control1 = new sap.ui.commons.Label({
text : Appcc.getText("MATERIAL_NO") + ":"
});
matrixCell1 = new sap.ui.commons.layout.MatrixLayoutCell();
matrixCell1.addContent(control1);
control = new sap.ui.commons.Label();
control.bindProperty("text", "matnr");
matrixCell1.addContent(control);
oMatNrRow1.addCell(matrixCell1);
vendorTable.addRow(oMatNrRow1);
I have tried control.getProperty("text") but it only returns null when it should have return a number if matnr is not null.
I also tried formatter. I will have no problem with formatter if matnr is not null. But if it is null, the point is to destroy/delete contents of both matrixCell1 instances. In my code below, addition of matrixCell1 content will still push through.
...
formatter: function(matnr){
if (matnr !== ''){
return contract
} else{
matrixCell.destroyContent();
}
});
matrixCell1.addContent(control);
oMatNrRow1.addCell(matrixCell1);
vendorTable.addRow(oMatNrRow1);
Not sure if you can move the ff code inside if statement
matrixCell1.addContent(control);
oMatNrRow1.addCell(matrixCell1);
vendorTable.addRow(oMatNrRow1);
Any ideas are appreciated.
I would also suggest to user the visible property.
Are you aware of conditional binding of UI5? Using them you do not need the formatter at all in that case. see
Found a workaround on my issue. It was a simple if else condition. For the if statement, I just added data[j].matnr and it worked! I also noticed that this was how SAP implemented the behavior also e.g. oSearchViewData.description.
I have an issue with getting default value of select dropdown.
i have fruits val:
val fruits = List("apple", "banana", "other")
and i render a tr with:
<tr id={ theLine.guid }>
<td>
{
SHtml.ajaxSelect(fruits, Full(fruits(0)),
s => {
mutateLine(theLine.guid) {
l => Line(l.guid, l.name, s, l.note)
}
Noop
})
}
</td>
(...)
on page html is rendered correctly with option selected="selected", but when i try to save it to DB i get empty value of fruit. if i change option to 'other' and then i select it back to 'apple', it saves right value.
i add also a println function to addLine to see what values are in this vector, and there is empty value if i dont change fruit option, so i suppose that it is not problem when i process lines to save it to DB.
can you help me with this?
thanks
Gerard
Before you change your select option, you are not triggering the event that calls your function. The function is bound to onChange and that only gets fired when the value changes.
To fix, you could either: Start with an option like "Select a value". This would require the user to change the item, but is the only way to trigger the onchange.
If you don't want to do that, you could add a button and add your logic to a button click handler that would get called when submitted. Something like this should help - you'll need to bind it to your output, either inline as you provided, or via CSS Selectors:
var selected = Full(fruits(0))
SHtml.ajaxSelect(fruits, selected,
s => {
selected = Full(s)
Noop
})
SHtml.ajaxSubmit("Submit", () => {
mutateLine(theLine.guid) {
l => Line(l.guid, l.name, selected, l.note)
}
})