Sorry for my bad english.
I'm trying to use a custom async validation in my angular application like this
asyncValidator(control:FormControl):Promise<any>{
const promise = new Promise<any>(
(resolve, reject) =>{
setTimeout(() => {
console.log("it works");
resolve(null);
},5000);
}
);
return promise;
}
I declared my reactive form like this:
this.customForm = this.formbuilder.group({
'userData': this.formbuilder.group({
'name': ['',this.asyncValidator],
'email': [''],
}),
'pass': [''],
'gender': ['male'],
'hobbies': this.formbuilder.array([
['Reading']
])
})
Even though, the asyncValidator always resolve(null), the name input still has ng-invalid class.
You incorrectly placed your async validator.
It should be:
'name': ['', null, this.asyncValidator],
(1) (2) (3)
where:
(1) - control value
(2) - sync validator
(3) - async validator
Stackblitz example
Related
I am using Dart Alfred framework. And learning websockets.
Here is implamentation from example:
var users = <WebSocket>[];
app.get('/ws', (req, res) {
return WebSocketSession(
onOpen: (ws) {
users.add(ws);
users
.where((user) => user != ws)
.forEach((user) => user.send('A new user joined the chat.'));
},
onClose: (ws) {
users.remove(ws);
users.forEach((user) => user.send('A user has left.'));
},
onMessage: (ws, dynamic data) async {
users.forEach((user) => user.send(data));
},
);
});
https://github.com/rknell/alfred#websockets
I can't figure out how to return some additional data for every user to client.
For example (let's simplify) it's country from server. For example I have next map:
Map cuntries = {
'Mike': 'USA',
'Piter': 'Holland',
'Jow': 'Italy'
};
I did not worked with WebSocket before. Could anybody provide example how to do it?
I’m in desperate need for help.
So I have a side project for an iOS app using Expo / React Native. And I'm having issues with setting up future payment methods using Stripe & Expo’s stripe library.
Our back-ender set up a graphql back-end, and provides me with all the variables I need. I’m trying to set up future payments to charge clients later, but I’m having trouble having with the paymentIntentSheet not showing up after creating an intent and fetching the clientSecret, ephemeralKey and customerId from our back-end. Now i don’t know where the issue is.. Is it because of me using the wrong versions? Maybe incorrect installation? Are the variables I’m using right..?
I used the following documentation page(s) as a guide:
https://stripe.com/docs/payments/save-and-reuse?platform=react-native
https://github.com/stripe/stripe-react-native#expo
These are the version numbers of the libraries I’m using, relevant to this topic/issue:
"expo": "~41.0.1",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
"#stripe/stripe-react-native": "0.1.1"
These are the steps I took:
Install stripe-react-native, and add it to my app.json as a plugin:
"plugins": [
[
"#stripe/stripe-react-native",
{
"merchantIdentifier": "",
"enableGooglePay": false
}
]
],
On global level, I import the StripeProvider component and pass down the given publishable key:
pk_live_51[.....]
On global level it’ll look like this:
<StripeProvider
publishableKey="pk_live_51[...]"
>
<AuthProvider>
<ApolloProvider client={client}>
<InnerApp />
</ApolloProvider>
</AuthProvider>
</StripeProvider>
Then according to the stripe docs, at the component where I'll be setting up future payments, I am supposed to fetch the setupIntent, ephemeralKey, and the customer from the back-end. In this case, it's done in the useEffect of my component. I was provided with a graphql mutation to obtain these values:
mutation (
$createUserPaymentMethodSetupIntentInput: CreateUserPaymentMethodSetupIntentInput!
) {
createUserPaymentMethodSetupIntent(
input: $createUserPaymentMethodSetupIntentInput
) {
setupIntentId
clientSecret
customerId
ephemeralKeySecret
}
}
I then call the function that will eventually provide me with all the necessary variables:
createIntent({
variables: {
createUserPaymentMethodSetupIntentInput: {
userUid: userUid,
},
},
})
.then((res) => {
const clientSecret =
res.data.createUserPaymentMethodSetupIntent.clientSecret
const setupIntentId =
res.data.createUserPaymentMethodSetupIntent.setupIntentId
const ephemeralKeySecret =
res.data.createUserPaymentMethodSetupIntent.ephemeralKeySecret
const customerId =
res.data.createUserPaymentMethodSetupIntent.customerId
// IGNORE THIS FOR NOW
initializePaymentSheet(
clientSecret,
setupIntentId,
ephemeralKeySecret,
customerId
)
})
.catch((err) => console.log({ graphqlError: err }))
The function gives me the following response:
Object {
"data": Object {
"createUserPaymentMethodSetupIntent": Object {
"__typename": "CreatedUserPaymentMethodSetupIntent",
"clientSecret": "seti_1K[....]",
"customerId": "cus_[...]",
"ephemeralKeySecret": "ek_live_[...]",
"setupIntentId": "seti_[...]",
},
},
According to the docs, I should use the setupIntent, ephemeralKey, and customer values as variables in one of their given functions/hooks called “initPaymentSheet” which should initialize the paymentsheet on their end.
These functions are imported like this:
const { initPaymentSheet, presentPaymentSheet } = useStripe();
In step 3, you see that I call a function that then calls the initPaymentSheet after successfully fetching the values from the server.
initializePaymentSheet(
clientSecret,
setupIntentId,
ephemeralKeySecret,
customerId
)
The initializePaymentSheet function looks like this:
const initializePaymentSheet = (
clientSecret,
setupIntentId,
ephemeralKeySecret,
customerId
) => {
initPaymentSheet({
customerId: customerId,
customerEphemeralKeySecret: ephemeralKeySecret,
setupIntentClientSecret: setupIntentId,
})
.then((res) => {
console.log(res)
setDisabledButton(false)
})
.catch((err) => console.log("error.."))
}
As you can see, I call the initPaymentSheet hook there, exactly like shown on the docs, and pass in the values i received from the back-end. However, after doing this i get the following error in the console:
Object {
"error": Object {
"code": "Failed",
"message": "You must provide the paymentIntentClientSecret",
},
}
This didn’t seem like a huge error, so I went ahead and changed the initPaymentSheet parameters by adding the paymentIntentClientSecret field and passed in the clientSecret value which wasn’t previously used:
initPaymentSheet({
customerId: customerId,
customerEphemeralKeySecret: ephemeralKeySecret,
setupIntentClientSecret: setupIntentId,
paymentIntentClientSecret: clientSecret
})
.then((res) => {
console.log(res)
setDisabledButton(false)
})
.catch((err) => console.log("little error.."))
After calling the function and seeing the error disappear, and the console.log shown above logs the following in the console:
Object {
"paymentOption": null,
}
I didn’t think too much of this, and thought it says null just because I have no previously set paymentOptions. I was just happy there were no more errors.
In the .then chain, you see that i enable a button that basically allows a user to call a function that would present a payment sheet where users can submit their paymentMethod. This button is disabled, because I think you should initialize the paymentSheet first before enabling it?
<WideButton
disabled={disabledButton}
text="Add New Payment Method"
clicked={openPaymentSheet}
/>
Anyways, now that the button is finally enabled, the user can click on it and it'll call the following function:
const openPaymentSheet = async () => {
setDisabledButton(true)
const { error, paymentOption } = await presentPaymentSheet()
if (error) {
console.log(error)
setDisabledButton(false)
Alert.alert(`Error code: ${error.code}`, error.message)
}
if (paymentOption) {
setDisabledButton(false)
Alert.alert(
"Success",
"Your payment method is successfully set up for future payments!"
)
console.log(paymentOption)
}
}
Now to quote the stripe docs:
When your customer taps the Set up button, call presentPaymentSheet() to open the sheet. After the customer completes setting up their payment method for future use, the sheet is dismissed and the promise resolves with an optional StripeError.
So, that's exactly what I did: Call the presentPaymentSheet, but then i get the following error:
Object {
"code": "Failed",
"message": "There was an unexpected error -- try again in a few seconds",
}
Now this is where I’m stuck, because it doesn’t provide me with any more information than given above. I’ve tried looking everywhere, and some resources tell me that I should update my stripe, some say i should add stripe to my plugins in app.json. I’ve done all of that and I can’t still figure it out.
Here is a video showing you the behavior in action:
https://user-images.githubusercontent.com/29804130/146274443-82c581ba-8913-4c87-ad2e-5b8719680fed.mov
Here is the code of the entire component:
// steps
// 1. call graphql query to set up intent, retrieve the clientsecret and setupintentid
// 2. call stripes initPaymentSheet's function and pass in useruid, clientsecret and setupintentid
// 3. when initpaymentsheet is ready, enable button for user to add payment information
// 4. Retrieve the payment information and call the createpaymentmethod mutation
// 5. disable button again, and refresh page
export default function PaymentMethods({ userUid }) {
const { initPaymentSheet, presentPaymentSheet } = useStripe()
const [disabledButton, setDisabledButton] = useState(false)
const [createIntent, { data, loading, error }] = useMutation(
ADD_PAYMENT_METHOD_INTENT
)
useEffect(() => {
createUserPaymentMethodIntent()
}, [])
const createUserPaymentMethodIntent = () => {
setDisabledButton(true)
createIntent({
variables: {
createUserPaymentMethodSetupIntentInput: {
userUid: userUid,
},
},
})
.then((res) => {
console.log(res)
const clientSecret =
res.data.createUserPaymentMethodSetupIntent.clientSecret
const setupIntentId =
res.data.createUserPaymentMethodSetupIntent.setupIntentId
const ephemeralKeySecret =
res.data.createUserPaymentMethodSetupIntent.ephemeralKeySecret
const customerId =
res.data.createUserPaymentMethodSetupIntent.customerId
initializePaymentSheet(
clientSecret,
setupIntentId,
ephemeralKeySecret,
customerId
)
})
.catch((err) => console.log({ graphqlError: err }))
}
const initializePaymentSheet = (
clientSecret,
setupIntentId,
ephemeralKeySecret,
customerId
) => {
initPaymentSheet({
customerId: customerId,
customerEphemeralKeySecret: ephemeralKeySecret,
setupIntentClientSecret: setupIntentId,
paymentIntentClientSecret: clientSecret,
})
.then((res) => {
console.log(res)
setDisabledButton(false)
})
.catch((err) => console.log("little error.."))
}
const openPaymentSheet = async () => {
setDisabledButton(true)
const { error } = await presentPaymentSheet()
if (error) {
Alert.alert(`Error code: ${error.code}`, error.message)
} else {
Alert.alert(
"Success",
"Your payment method is successfully set up for future payments!"
)
}
}
return (
<ScrollView>
<PaymentMethodList userUid={userUid} />
<WideButton
disabled={disabledButton}
text="Add New Payment Method"
clicked={openPaymentSheet}
/>
</ScrollView>
)
}
someone plz help :(
you might want to check the logs in your Stripe Dashboard (Dashboard -> Developers -> Logs). From there you'll be able to see more info about this error,
Im trying to make file upload in my api using this strategy: https://stephen-knutter.github.io/2020-02-07-nestjs-graphql-file-upload/.
Without the ValidationPipe works, but when i enable ValidationPipe this apresent error on class-transformer:
TypeError: Promise resolver undefined is not a function
at new Promise (<anonymous>)
at TransformOperationExecutor.transform (/Users/victorassis/Workspace/barreiroclub/api/node_modules/class-transformer/TransformOperationExecutor.js:117:32)
at _loop_1 (/Users/victorassis/Workspace/barreiroclub/api/node_modules/class-transformer/TransformOperationExecutor.js:235:45)
at TransformOperationExecutor.transform (/Users/victorassis/Workspace/barreiroclub/api/node_modules/class-transformer/TransformOperationExecutor.js:260:17)
at ClassTransformer.plainToClass (/Users/victorassis/Workspace/barreiroclub/api/node_modules/class-transformer/ClassTransformer.js:17:25)
at Object.plainToClass (/Users/victorassis/Workspace/barreiroclub/api/node_modules/class-transformer/index.js:20:29)
at ValidationPipe.transform (/Users/victorassis/Workspace/barreiroclub/api/node_modules/#nestjs/common/pipes/validation.pipe.js:40:39)
at /Users/victorassis/Workspace/barreiroclub/api/node_modules/#nestjs/core/pipes/pipes-consumer.js:15:33
at processTicksAndRejections (internal/process/task_queues.js:97:5)
I searched a lot, but seens like class-transformer is abandoned, and the answers was to not use ValidationPipe with upload.
Someone pass for this and found a solution?
I try to follow the example you posted above and then enable the transformation of class and I got no error as you mentioned. But I met this error before when I was trying to put the wrong type of argument in the resolver.
Below is where I setup my app bootstrap:
async function bootstrap() {
const app = await NestFactory.create(AppModule);
app.enableCors({
origin: extractOrigins(app.get(ConfigService).get('CORS_ORIGINS')),
});
app.useGlobalPipes(
new ValidationPipe({
transform: true,
}),
);
app.use(graphqlUploadExpress());
await app.listen(app.get(ConfigService).get('PORT') ?? 3000);
logScaffoldApp(app);
}
bootstrap();
The resolver code:
#Mutation(() => Boolean, { nullable: true })
async uploadVocabularies(
#Args({
name: 'file',
type: () => GraphQLUpload,
})
{ createReadStream, filename }: FileUpload,
) {
console.log('attachment:', filename);
const stream = createReadStream();
stream.on('data', (chunk: Buffer) => {
console.log(chunk);
});
}
And I did get the error when I try to follow another tutorial and trying to make the argument as a Promise so then the class transformer got the same error:
#Mutation(() => Boolean, { nullable: true })
async uploadVocabularies(
#Args({
name: 'file',
type: () => GraphQLUpload,
})
attachment: Promise<FileUpload>,
) {
const { filename, createReadStream } = await attachment;
console.log('attachment:', filename);
const stream = createReadStream();
stream.on('data', (chunk: Buffer) => {
console.log(chunk);
});
}
I hope this can help you and other people who viewed this post ^^
I am trying to patch the object received from webapi to an angular reactive form. The form also has a formarray. But, despite having more than 3 or more records only 2 records are being patched to the formarray of the reactive form.
I have two entities noseries and noseriesList, where a noseries has zero or many noseriesLists. So after obtaining noseries from webapi, i want to patch properties and navigation list "noseriesLists" of noseries into reactive form.
Rest of the properties are being patched properly, but only 2 records of navigation list "noseriesLists" is being patched to the formArray nested inside the reactive form.
//initialization of form
this.noseriesForm = this.fb.group({
id: [null],
description: ['', Validators.required],
code: [ '', Validators.compose([Validators.maxLength(10), Validators.required])],
noSeriesList: this.fb.array([
this.initLine(), this.initLine()
])
});
//patching the object received from service to form
this.route.params.subscribe(routeParam => {
if (routeParam.id) {
this.noseriesService.get(routeParam.id)
.subscribe((data: NoSeries) => {
this.isCreateMode = false;
this.noseries = data;
this.noseriesForm.patchValue(this.noseries);
console.log(this.noseries, 'data from api');
console.log(this.noseriesForm.value,'formvalue');
});
}
});
//initialise formArray
initLine(): FormGroup {
return this.fb.group({
id: [null],
startingNoSeries: ['', Validators.required],
endingNoSeries: '',
lastUsedSeries: '',
effectiveDate: [null],
endingDate: [null],
noSeriesId: [null]
});
}
logging the data received from service shows 3 noseriesList records, whereas logging formvalue only shows 2 records of noseriesList.
while you are initializing the form array for the first time you are adding two empty controls. that's why when you patch value to formgroup, only those two empty controls get filled. you should fill the formarray with number of controls that is going to be patched before patching a value.
//patching the object received from service to form
this.route.params.subscribe(routeParam => {
if (routeParam.id) {
this.noseriesService.get(routeParam.id).subscribe((data: NoSeries) => {
this.isCreateMode = false;
this.noseries = data;
const nsList = this.noseriesForm.get("noSeriesList") as FormArray;
nsList.clear();
this.noseries.forEach(_ => nsList.push(this.initLine()));
this.noseriesForm.patchValue(this.noseries);
console.log(this.noseries, 'data from api');
console.log(this.noseriesForm.value,'formvalue');
});
}
});
I would like to detect the value of change event to the input on form.component.ts.
I would not like to call the function ex: (onChange) = "function($event.target.value)"
public form: FormGroup;
constructor(private formBuilder: FormBuilder){
}
private loadForm(){
this.form = this.formBuilder.group({
tipo: [null, Validators.required],
nomeRazao: [null, Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(64)])],
apelidoFantasia: [null, Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(64)])],
cpfCnpj: [null, Validators.compose([Validators.required, Validators.minLength(11), Validators.maxLength(14)])],
rgIe: [null],
contato: this.formBuilder.group({
email: [null],
telefone: [null]
}),
endereco: this.formBuilder.group({
cep: [null, Validators.pattern('^([0-9]){5}([-])([0-9]){4}$')],
uf: [null],
cidade: [null],
bairro: [null, Validators.required],
logradouro: [null],
complemento: [null],
numero: [null, Validators.pattern('/^\d+$/')]
})
});
}
ngOnInit() {
this.loadForm();
}
You can subscribe to your form changes by using this :
this.form.valueChanges.subscribe(() => {
if (this.registerForm.controls['yourControlName'].value === 'someValue') {
//
}
});
For detecting changes in value of a particular field, 'valueChanges' event on that field can be subscribed, as shown below:
this.myForm.get('formcontrolname').valueChanges.subscribe(val => {
this.message = val;
});
For people who are checking for higher versions of Angular or to whom the accepted solution isn't working,
Try this
this.myForm.valueChanges.subscribe(val => {
this.message = val.formcontrolname;});
the approach is to use the variables inside the change detection and you can restrict it with the respective form control name