adopted-ember-addons / adopted-ember-addons/ember-cp-validations
Validation on Component Property
- Lenguaje dominante
- JavaScript
- Estrellas
- 439
- Forks
- 172
- Métricas de merge de PR
- Sin PR fusionados en 30 d
Descripción
I'm trying to validate just on properties of my component and am getting stuck with ```v-get isInvalid``` argument. I'm unsure how to proceed. Code below.
components/login-form.js
```
import Component from '@ember/component';
import EmberObject, { computed } from '@ember/object';
import { later } from '@ember/runloop';
import $ from 'jquery';
import {
validator,
buildValidations
}
from 'ember-cp-validations';
var Validations = buildValidations({
name: validator('presence', {
presence: true,
message: 'Need a name'
}),
email: [
validator('presence', {
presence: true,
message: 'Это поле не должно быть пустым'
}),
validator('format', {
type: 'email',
message: 'Электронная почта имеет некорректный формат'
})
],
pass: validator('presence', {
presence: true,
message: 'Это поле не должно быть пустым'
}),
passwordConfirmation: [
validator('presence', {
presence: true,
message: 'Это поле не должно быть пустым'
}),
validator('confirmation', {
on: 'pass',
message: 'Пароли не совпадают'
})
]
});
export default Component.extend(Validations,{
genderType: ['Male', 'Female', 'Other', 'Prefer not to say'],
gender: 'Male',
progress: .5,
text: null,
stepTwo: false,
userLoggingIn: false,
success: false,
loading: false,
termsAgree: false,
firebaseApp: Ember.inject.service(),
actions: {
toggleModal(){
this.get('owner').toggleProperty('isShowingModal');
},
toggleTermsOfServiceAgreement(){
this.toggleProperty('termsAgree');
},
nextForm(){
this.toggleProperty('stepTwo');
this.set('progress', 1)
},
logInSelect(){
this.set('userLoggingIn', true);
this.set('cbStateInitial', false);
},
signUpSelect(){
this.set('userLoggingIn', false);
this.set('cbState', false);
},
chooseGender(city) {
this.set('gender', city);
},
searchIATA(term) {
let url = `https://skyscanner-skyscanner-flight-search-v1.p.mashape.com/apiservices/autosuggest/v1.0/US/USD/en-EN/?query=${term}`;
return fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'X-Mashape-Key': 'xxxxxxxx',
'X-Mashape-Host': 'skyscanner-skyscanner-flight-search-v1.p.mashape.com',
},
}).then(function(response) {
return response.json();
}).then(function(results){
return results.Places;
});
},
signIn(provider, password, email) {
var self = this;
this.get('session').open('firebase', {
provider: provider,
email: email || '',
password: password || '',
}).then(function(data) {
self.toggleProperty('success');
later((function() {
self.get('owner').toggleProperty('isShowingModal');
}), 1550);
});
},
signUp(email, pass, name) {
this.toggleProperty('loading');
var emailTrim = this.get('email').trim();
var pass = this.get('pass');
var name = this.get('name');
var city = this.get('city');
var owner = this.get('owner');
var gender = this.get('gender');
var terms = this.get('termsAgree');
var homeAirport = this.get('selected').PlaceId;
var self = this;
const auth = this.get('firebaseApp').auth();
auth.createUserWithEmailAndPassword(emailTrim, pass).then((userResponse) => {
const user = this.get('store').createRecord('user-profile', {
id: userResponse.uid,
email: userResponse.email,
name: name,
homeAirport: homeAirport,
city: city,
gender: gender,
termsOfServiceAgree: terms
});
return user.save();
}).then((userResponse) => {
this.get('session').open('firebase', {
provider: 'password',
email: emailTrim || '',
password: pass || '',
}).then(function(data) {
$('.circle-loader').toggleClass('load-complete');
$('.checkmark').toggle();
self.toggleProperty('success');
later((function() {
self.get('owner').toggleProperty('isShowingModal');
}), 1550);
});
})
}
}
});
```
components/validated-input.js
```
import Ember from 'ember';
const {
computed,
defineProperty,
} = Ember;
export default Ember.Component.extend({
classNames: ['validated-input', 'form-group'],
classNameBindings: ['showErrorClass:has-error', 'isValid:has-success'],
model: null,
value: null,
type: 'text',
valuePath: '',
placeholder: '',
validation: null,
isTyping: false,
init() {
this._super(...arguments);
var valuePath = this.get('valuePath');
defineProperty(this, 'validation', computed.oneWay(`model.validations.attrs.${valuePath}`));
defineProperty(this, 'value', computed.alias(`model.${valuePath}`));
},
notValidating: computed.not('validation.isValidating'),
didValidate: computed.oneWay('targetObject.didValidate'),
hasContent: computed.notEmpty('value'),
isValid: computed.and('hasContent', 'validation.isValid', 'notValidating'),
isInvalid: computed.oneWay('validation.isInvalid'),
showErrorClass: computed.and('notValidating', 'showMessage', 'hasContent', 'validation'),
showMessage: computed('validation.isDirty', 'isInvalid', 'didValidate', function() {
return (this.get('validation.isDirty') || this.get('didValidate')) && this.get('isInvalid');
})
});
```
templates/login-form.hbs (snippet)
```
{{validated-input type="text" model=this placeholder="Enter Your Email" valuePath="email" value=email label='EMAIL'}}
{{if stepTwo 'Submit' 'Next'}}
```
templates/validated-input.hbs
```
{{yield}}
{{label}}
{{input type=type value=value placeholder=placeholder class="form-control" name=valuePath}}
{{#if isValid}}
{{/if}}
{{#if showMessage}}
{{v-get model valuePath 'message'}}
{{/if}}
```
Any help is much appreciated, I've been stuck on this for some time now..Thanks!
Guía de contribución
Evaluación
Este issue todavía no se ha evaluado.