adopted-ember-addons / adopted-ember-addons/ember-cp-validations

Validation on Component Property

Abierto
#609 1 comentario 0 reacciones 0 asignados Ver en GitHub
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

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.