I want to validate the length of a field, after removing it's mask. I'm using https://github.com/text-mask/text-mask, and because of that, I can't just use the property "minLength". With the mask that doesn't work. Always has the size expected, even the user just typed one character. Therefore, the need of calling a method in "ngModelChange", clear the mask, and then see the length of the text.
So the question is, how can I set this form field as invalid, if it fails my method validation?
checkDigitosCPF() {
const qtdDigitos = _.replace(this.advogado.cpf, /\D/g, '').length;
this.isCPFNotOk = _.isEqual(qtdDigitos, 11);
}
<div class="form-group">
<label class="form-control-label" for="field_cpf">CPF</label>
<input type="text" class="form-control" name="cpf" id="field_cpf" [(ngModel)]="advogado.cpf" required [textMask]="{mask: cpfMask}" (ngModelChange)="checkDigitosCPF()" minlength="11" />
<div [hidden]="!(editForm.controls.cpf?.dirty && editForm.controls.cpf?.invalid)">
<small class="form-text text-danger" [hidden]="!editForm.controls.cpf?.errors?.required" jhiTranslate="entity.validation.required">
This field is required.
</small>
<small class="form-text text-danger" [hidden]="isCPFNotOk">
Esse campo deve ter no minímo 11 carácteres.
</small>
</div>
</div>
In the component the validator method should look like this:
// this function should be triggered each time the value change or the form submit
validateField(form): void {
if (conditionOfError) {
form.controls.yourFieldName.setErrors({'customLengthError': true})
} else {
form.controls.yourFieldName.updateValueAndValidity()
}
}
In the form html error list:
<small *ngIf="yourFieldName?.errors?.customLengthError">
The error text.
</small>
I solved the question. I got the desired behavior by creating a custom directive.
Related
I'm facing a problem, mainly I cannot fill a value in input but in the HTML. I searched but nothing seems to work. I tried value, (value), [(value)], "k.bag.ConstructionYear", "{{k.bag.ConstructionYear}}" and other combinations and nothing seems to work.
mycomponent.html
<ng-container
*ngIf="{
// other stuff
firstStepState: firstStepState$ | async
} as o"
>
//........
<ng-container *ngIf="{
bag : testService.getData(o.firstStepState.value1, o.firstStepState.value2) | async
} as k">
<ng-container *ngIf="k.bag !== undefined && k.bag !== null">
{{k.bag.ConstructionYear}} // <-- this is showing
<input
type="text"
name="constructionYear"
formControlName="constructionYear"
id="constructionYear"
data-test="constructionYear"
placeholder=""
[value]="k.bag.ConstructionYear" <-- this is the problem
/>
by assigning formControlName="constructionYear" to the input, you delegate value control of this input to your formControl. from this point of time you should update the logical form from your ts code whenever you want, not the value of the input. for example through method control.setValue(newValue)
<input
type="text"
name="constructionYear"
formControlName="constructionYear"
id="constructionYear"
data-test="constructionYear"
placeholder=""
[(ngModel)]="k.bag.ConstructionYear"
/>
for binding with your data
I have a HTML textbox having required attribute enabled on it.
Validation is working fine except in one scenario.
When data is binded dynamically, then error message still getting displayed. But if I do any key press on textbox then error message disappears.
How to resolve issue.
Update:
I'm using below code
<input type="text" aria-label="text" [disabled]="isDisable"
#TEXTVALUE="ngModel" [ngClass]="{'invalid-data': TEXTVALUE.invalid && userForm.submitted, 'valid-data': TEXTVALUE.valid && userForm.submitted}" [ngModel]="customernamevalue" name="customername" id="custname"
[required]= "true">
<div style="float:left;"
*ngIf="TEXTVALUE.invalid && (TEXTVALUE.dirty || TEXTVALUE.touched)">
<span style="color: red;"> Name is mandatory field.</span>
</div>
Im trying update the input value but it returns this error:
TypeError: "setting getter-only property "value"
I created a function in angular for try modify the value:
modifyValue(searchCenter, centerId){
searchCenter.value = centerId._id;
}
centerId is the value that i want to asignate to input value.
And this is the html:
<p>
<label>Search a center</label>
<input type="text" name="searchCenter" class="form-control" #searchCenter='ngModel' [(ngModel)]="term" [(ngModel)]="user.center" required/>
</p>
<div class="center panel panel-default" *ngFor="let center of centers | filter:term">
<div class="panel-body">
<button (click)="modifyValue(searchCenter, center)" type="button" class="centers-button">{{center.name}}, {{center.community}},
{{center.municipality}}</button>
</div
>
Issue
You are trying to set the value property of string object which is wrong. string doesn't have any property called value.
Fix
You might be trying to set the value of term. You have two option to do so -
First change
Change in html
#searchCenter='ngModel'
to
#searchCenter
2.Second option is change in the ts file
modifyValue(searchCenter, centerId){
this.term = centerId._id;
}
I'm trying to send my login with :
'submit form': function(event) {
event.preventDefault();
event.stopPropagation();
var loginRequest = {
username: event.target.loginUsername.value.toLowerCase(),
password: event.target.loginPassword.value,
};
var callback = function(response) {
Session.set('showLoading', false);
};
Session.set('showLoading', true);
Accounts.callLoginMethod({
methodArguments: [loginRequest],
userCallback: callback,
});
},
But I get an error and I can't figure out what is the thing that create this error :
Exception while invoking method 'login' Error: Match error: Unknown key in field username
...
Sanitized and reported to the client as: Match failed [400]
I founded some informations in the web but nothing that really helped me. I think it's generated when I call Accounts.callLoginMethod
My form looks like this:
<form>
<div class="row">
<div class="input-field col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
<label for="loginUsername">Username</label>
<input id="loginUsername" type="text" class="form-control" disabled="{{showLoading}}" required>
<br>
<label for="loginPassword">Password</label>
<input id="loginPassword" type="password" class="form-control" disabled="{{showLoading}}" required>
</div>
</div>
<br>
{{#if showLoading}}
{{> loading}}
{{else}}
<div class="text-center">
<button type="submit" class="btn btn-primary">Login</button>
</div>
{{/if}}
</form>
Someone could help me or know what is creating this error ?
Here is my 2 cents. Accounts.callLoginMethod is technically not a documented API function and in theory could change in any future Meteor release. Since it's not documented, the errors that it returns are not well defined and could be confusing.
Since you are just doing password authentication, I would recommend you use Meteor.loginWithPassword(user, password, [callback]) instead. At least this way you have a set of API documentation to fallback on if you get errors such as this (it also returns more specific errors when something goes wrong).
Try switching and see if you still receive an error output. If so the error will be one of the below error messages and you can better debug to see what's going on.
“Unrecognized options for login request [400]” if user or password is undefined.
“Match failed [400]” if user isn’t an Object or String, or password isn’t a String.
“User not found [403]” if the email or username provided in user doesn’t belong to a registered user.
“Incorrect password [403]” if the password provided is incorrect.
“User has no password set [403]” if user doesn’t have a password.
If you encounter one of the above errors, then do console.log(username) and make sure it is a string or object with the value that you are expecting.
So I have a form with a submit button and a hidden field. The hidden field holds the value which will be used to query. When the user presses the submit button, the value is supposed to pass to the controller and the controller is supposed to query and then render a new page with the query result. Here is the code,
#{list items:courses, as:'course'}
<li>
${course.CourseCode}
#{form #Courses.detail()}
<div>
<input type="text" name="Code" value = ${course.CourseCode} />
</div>
<div>
<input type="submit" value="Course Detail" />
</div>
#{/form}
</li>
<br />
#{/list}
I was having problems with "Course" not found so I changed the hidden field to text. This is where the weird thing starts. I see only half the value of ${course.CourseCode}. For example, if course code = ICCS 101, I see "ICCS 101" in the list but in the text field I see only ICCS. I have no idea why this is happening.
Here is my controller
public static void detail(String Code){
System.out.println(Code);
List<Course> courses = Course.find("byCourseCode", Code).fetch();
int index = courses.size()-1;
if(index>=0){
Course course = courses.get(index) ;
render(course);
}
else{
notfound();
}
}
Edit::It seems like it truncates everything after the first white space.
In your view the value property of your input tag should be between quotes "..." otherwise everything after the first space will get truncated
<input type="text" name="Code" value="${course.CourseCode}" />