We Keep Coding

userForm value not in range

I am trying to validate the length of ID value in userForm in Angular14, I tried for
if(this.userForm.value.id.length < 6 || this.userForm.value.id.length >9){
console.log("length error")
}
But this is not giving the expected result. the above snippet is working for != and = only.
How can I validate this value for the range.
Adding the .ts and .html snippets for the better understanding.
component.ts
userSubmit(){
console.log(this.userForm.get('image').value);
console.log(this.userForm.value);
const formData = new FormData();
formData.append('image', this.images);
formData.append('id', this.userForm.value.id);
formData.append('des', this.userForm.value.des);
formData.append('name', this.userForm.value.name);
if(this.userForm.value.id.length < 6 || this.userForm.value.id.length > 9){
console.log("length error")
}
component.html
<div class="container">
<div *ngIf="errorMsg" class="alert alert-danger alert-dismissible fade show" role="alert">
<strong>{{errorMsg}}</strong>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<form [formGroup]="userForm" >
<div class="col-lg-4 mt-2" >
<label>Employee ID:</label>
<input type="number" class="form-control" formControlName="id" [(ngModel)]="id">
</div>
<div class="col-lg-4 mt-2" *ngIf="!getParamId" >
<button class="btn btn-primary btn-sm" [disabled]="!name || !des ||!photo||!id" (click)="userSubmit()">
Submit!!
</button>
</div>
<div class="col-lg-4 mt-2" *ngIf="getParamId" >
<button class="btn btn-dark btn-sm" (click)="userUpdate()" >
Update
</button>
</div>
</form>
</div>

From what I understand from your question, you are performing the validation for id with the length within a range.
The problem is currently your id is not a string, but it is a number.
<input type="number" class="form-control" formControlName="id" [(ngModel)]="id">
Hence you can't use .length as this property doesn't exist in the number value.
Change the <input> element from type="number" to type="text" or without type. (By default type is text).
Since you are using the Reactive form, you don't need the [(ngModel)].
<input type="text" class="form-control" formControlName="id" />
Add Validators.minLength() and Validators.maxLength() validators to id form control.
import { Validators } from '#angular/forms';
this.userForm = this.fb.group({
id: [
'',
[Validators.required, Validators.minLength(6), Validators.maxLength(9)],
],
// Following controls
});
Note: If you want the id input to be numeric characters, you need Validators.pattern():
Validators.pattern('[0-9]+')
Or validate with the length as well, so the Validators.minLength() and Validators.maxLength() can be omitted.
Validators.pattern('[0-9]{6,9}')
To disable the submit button when there is any control(s) that failed the validation:
<button
class="btn btn-primary btn-sm"
[disabled]="idHasError /* or other form controls */"
(click)="userSubmit()"
>
Submit!!
</button>
And implementing the getter.
get idHasError() {
return this.userForm.controls.id.errors;
}
Implement the getter method(s) for the rest form control(s) to return a boolean value that the form control has errors or not.
Demo # StackBlitz

unable to reset input field -- (input filed is used by plugin selectize)

This is my html code: this is my input filed where i have declare input type and id.
<div class="col-lg-4 col-sm-6">
<div class="form-group">
<div>
<input id="SkillsAndInterests" class="form-control" type="text"
name="SkillsAndInterests" style="width:286px;height:35px;" />
</div>
</div>
</div>
This is my js code :
vm.CommunityMembersAdditionalInfoData.SkillsAndInterests = vm.skillsandinterestarray;
$('#SkillsAndInterests').tagSuggest({
data: vm.CommunityMembersAdditionalInfoData.SkillsAndInterests,
sortOrder: 'name',
maxDropHeight: 200,
name: 'SkillsAndInterests'
});
And this is my reset function: where i am unable reset filed
vm.ResetSerachMembers = function () {
$("#SkillsAndInterests").val('');
}
And this is my button where i am calling reset function:
<button class="btn btn-danger" ng-disabled="data.isMembersLoading"
ng-click="data.ResetSerachMembers();" type="button">
Reset
</button>

Update data in array not rendering in DOM

On trying to update data in the array from the modal box. The data is not updated in the dom v-for list.
The following consists of modal and details. The data is entered in the modal box which updates the data in details. The cdata is an array which is updated through out the process. When the data is entered in the modal box. This data is pushed in the cdata. Which should update the details v-for loop but it is not happening rather. I tried updating by listening thru events still there's no effects.
data.vue
export default {
props: ["c-data"],
data: function() {
return {};
},
mounted: function() {},
methods: {}
};
<template>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#aModal">Add </button>
<data-detail :cdata="cData"></data-detail>
<add-modal :cdata="cData"></add-modal>
</template>
The following contains code for add modal which updates the data in cData array which is data entered in the data modal.
add-modal.vue
export default {
props: ["c-data"],
data: function() {
return {
cName: "",
cEmail: ""
};
},
mounted() {
console.log(this.cData);
},
methods: {
addC() {
this.cData.push({ cName: this.cName, cEmail: this.cEmail });
console.log(this.cData);
this.$root.$emit("cEvent", this.cData);
}
}
};
<template id="add-modal">
<div class="modal fade" id="aModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-large" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="box">
<div class="row">
<div class="form-group col-sm-6 col-lg-6 col-xl-4">
<div class="input-section">
<input type="text" name="cName" class="form-control" id="c-name" v-model="cName" placeholder="Enter name" value="" required>
<label for="c-name"> Name*</label>
</div>
</div>
<div class="form-group col-sm-6 col-lg-6 col-xl-4">
<div class="input-section">
<input type="text" v-model="cEmail" name="cEmail" class="form-control" id="c-email" placeholder="Enter email" required>
<label for="c-email"> Email*</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
<button type="button" #click="addC" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</template>
The follow consists of list of v-for which needs to be updated but are not updating.
export default {
props: ["c-data"],
data: function() {
return {};
},
mounted() {
console.log(this.cData);
},
methods: {}
};
<div v-for="(item, i) in cData" :key="item.id">
{{item.name}}
</div>
I have tried to update it thru listening events but no results as cData was already update in the data component.

You should never directly manipulate data that is passed in as a property.
Using events was the right way to go, you just have to de-couple the newly added data from the properties object.
Use
this.$emit("cEvent", { name: this.cName, email: this.cEmail } );
And listen for it in the parent component
<add-modal :cdata="cData" #cEvent="handleNewData"></add-modal>
...
handleNewData(d) {
this.cData.push(d);
}
Your cData object should only be manipulated directly by the actual owner of that data i.e. the parent where the cData object originates from, not in any component where you pass it in as a property.
Full working example that you can use as a reference: https://codesandbox.io/s/n4lk7rmxx4

How to reload page after pressing enter in chat

So here is my code. When I press the button with mouse it reloads page but, when I press enter key its not refreshing. Any ideas how to do it?
<template lang="html">
<div class="chat-composer">
<input maxlength="180" type="text" placeholder="mesajınızı yazınız" v-model="messageText" #keyup.enter="sendMessage">i
<button class="btn btn-primary" #click="sendMessage" onClick="window.location.reload();>Gönder</button>
</div>
</template>
here is full the code I use. So im not the expert.. I need help about it
<template lang="html">
<div class="chat-composer">
<input maxlength="180" type="text" placeholder="mesajınızı yazınız" v-model="messageText"
#keyup.enter="sendMessage">
<button class="btn btn-primary" #click="sendMessage" onClick="window.location.reload();"
>Gönder</button>
</div>
</template>
<script>
export default {
data() {
return {
messageText: ''
}
},
methods: {
sendMessage(){
this.$emit('messagesent',{
message: this.messageText,
user: {
name: $('.navbar-right .dropdown-toggle').text()
}
});
this.messageText = '';
},
},
}
</script>

You are using Vue.js, if so you can do something like this
<button class="btn btn-primary" v-on:keyup.enter="window.location.reload()"
#click="sendMessage" onClick="window.location.reload();>Gönder</button>
You can check the Key Modifiers here the https://v2.vuejs.org/v2/guide/events.html

Javascript Document.getElementById returning null

I'm new to MVC and AJAX so this is probably a simple mistake I am making but using the code below, I am getting the following error trying to getElementById("txtCount").value:
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h5 style="font-weight:bold;">Parameters</h5>
</div>
<div class="panel-body" id="parameters">
<form class="form-horizontal" id="frmParameters">
<div class="form-group">
<label for="txtCount" class="col-sm-4 col-form-label">Repeat</label>
<input type="number" min="1" max="100" step="1" id="txtCount" value="#Model.Count" class="input-sm col-sm-7" />
</div>
#if (Model.Grammar.SupportsMaxLength)
{
<div class="form-group">
<label for="txtMaxLength" class="col-sm-4 col-form-label">Max Length</label>
<input type="number" min="1" max="100" step="1" id="txtMaxLength" value="#Model.MaxLength" class="input-sm col-sm-7" />
</div>
}
<button name="btnGenerate" class="btn btn-primary pull-right" onclick="Generate();">Generate</button>
</form>
</div>
</div>
</div>
</div>
<script>
function Generate() {
var data = { count: document.getElementById("txtCount").value, maxLength: document.getElementById("txtMaxLength").value };
}
</script>
If I change:
var data = { count: document.getElementById("txtCount").value, maxLength: document.getElementById("txtMaxLength").value };
to:
var data = { count: document.getElementById("txtCount").value};
I don't get the error anymore.

Your code looks fine. I think you are getting the error when your code tries to execute this line
document.getElementById("txtMaxLength").value
Because in your view you are rendering this element when some if condition returns true. So it is possible that your view does not have this input element at all and you are trying to read that! (Check the view source of the page and search for input with txtMaxLength id.
The best solution is to check it exists before trying to read the value.
var data = {
id: "#Model.Id",
count: document.getElementById("txtCount").value,
maxLength: null // or whatever default value you want
};
if (document.getElementById("txtMaxLength")) {
data2.maxLength = document.getElementById("txtMaxLength").value;
}
Or if you are using jQuery library, it is easy
var data = {
id: "#Model.Id",
count: $("#txtCount").val(),
maxLength:$("#txtMaxLength").val()
};