This is the sample form item inside my form for user to input while create new data :
<nz-form-item>
<nz-form-label>{{ 'label.bank.number' | translate }}</nz-form-label>
<nz-form-control [nzErrorTip]="'error.bank.number' | translate">
<input nz-input formControlName="bankAccNo"/>
</nz-form-control>
</nz-form-item>
This is the sample hard code data :
this.bank.push(
{
id: '0',
code: 'P0001',
bankName: 'MayBank',
bankNumber: '1231231233',
currency: 'RM',
status: 'Active'
},
{
id: '1',
code: 'P0002',
bankName: 'Public Bank',
bankNumber: '1231123145',
currency: 'RM',
status: 'Inactive'
});
What I try to achieve is when user press edit button, the input box with formControlName="bankAccNo" will retrieve the bankNumber data. Please help if you have any idea on how to do this, tried few solution but none of it works.
Solution found to this question : https://angular.io/api/forms/FormControlName
Related
I created a custom CKEditor5 plugin that makes use of the "a" attribute similar to the default link plugin provided by CKEditor5. All the expected functionality that I created so far for this custom plugin which simply styles the link as a button works. However upon saving the page in the CMS (Drupal) and returning to the edit screen the model name for the button changes to "linkHref" which is the model name for the Link plugin. I checked before saving that the model name that I set up "button" was being recognized when using the Inspector. It kept the model name even when I toggled the "source" button. See schema and conversion code below.
_defineSchema() {
const schema = this.editor.model.schema;
schema.extend('$text', {allowAttributes: ['button']});
}
_defineConverters() {
const {conversion} = this.editor;
conversion. For('downcast').attributeToElement({
model: 'button',
view: (modelAttributeValue, conversionApi) => {
const {writer} = conversionApi;
return writer.createAttributeElement(
'a',
{
href: modelAttributeValue,
class: 'btn btn-geneseo btn-primary'
},
{priority: 6} // I added this because the Link plugin had theirs at 5
);
},
converterPriority: 'high' // Tried this made no difference
});
conversion.for('upcast').elementToAttribute({
view: {
name: 'a',
attributes: ['href'],
classes: 'btn btn-geneseo btn-primary'
},
model: {
key: 'button',
value: viewElement => viewElement.getAttribute('href'),
},
converterPriority: 'high' // According to documentation this should be given priority
});
}
This is the result the first time the button is created. Noticed that it is recognized as a button model.
After saving the page and going back to the edit screen this is the result.
Why would this happen? What would I need to change?
I’m playing around with creating a custom notice in Gutenberg, and based on whether the data validates when the post is saved, the notice may include some HTML links.
I ended up only seeing the raw HTML output, so after some searching on Google I found this post on Github suggesting to use RawHTML.
So I put this code together which does create the red notice, but it doesn’t show the actual HTML only [object Object]. So I’m clearly doing something wrong here, but not sure what? Anyone who can point me in the right direction how to make the notices show the raw HTML?
wp.data.dispatch( 'core/notices' ).createNotice(
'error',
wp.element.createElement( wp.element.RawHTML, null, '<p>test</p>' ),
{
id: 'wpslupdate', // prevent duplicates
isDismissible: true
}
);
The notice component has an actions property which enables links to be rendered inside a notice, removing the need to use RawHTML.
options.actions [Array]: User actions to be presented with notice.
A notice can have one or more actions, each action has a label and must specify either a url or onClick function, eg:
wp.data.dispatch('core/notices').createNotice(
'error', // type of notice
'Something went wrong..', // message
{
id: 'wpslupdate', // prevent duplicates
isDismissible: true,
actions: [
{
label: 'Option A',
url: '#link' // styled as plain link
},
{
label: 'Option B',
onClick: () => { alert('ok') } // styled as a button link
}
]
}
);
Result:
I want to develop a telegram Bot with multiple options, for example at first I show 3 buttons : button 1 , button 2 , button 3
and when user click on each, again, I show three other buttons : button 1 , button 2 , button 3
and after step 2, I want to show user first and second button he clicked, for example :
he first click on button 3 and then click on button 1, so, I want to show :
31
how can I know which button at he clicked first ? is there anyway to get chat history from bot ? or I should save his clicks on a database ? or what is your solution ?
*I am using c# and telegram.bot , but just give me a solution, language is not important.
First you can use inline keyboard that gives you the user updates with data. That means you can obtain Ids for any question and when user click you get the question Id.
Using InlineKeyboardMarkup with question key as data.
I suggest you to save a question tree to the database and save current state of each user.
Then when user clicked a button; you get the question key and find it in the tree and ask the next question or find where it comes from (previous questions).
If you want to run any method related to each question you can simply store each question method name in tree and when user arrives fire that method with Reflection.
You should save the chat_id and buttons clicked in a database. Chat history for bots is short lived and may not be reliable for your purpose.
You can use inline buttons. Solution with JavaScript:
var options = {
reply_markup: JSON.stringify({
inline_keyboard: [
[
{text: 'button 1', callback_data: '1'},
{text: 'button 2', callback_data: '2'},
{text: 'button 3', callback_data: '3'},
],
]
})
};
bot.sendMessage(chatId, 'Pick action:', options);
See, you can pass any callback data. So I would save current path in this callback_data property. Format is not important, can be array, string, whatever. But it will represent the stack.
For example, path a2.a1.a3 means that you clicked on button number 2, then on number 1, and then on number 3. And data structure can be similar to this:
{
q: 'Which path you wanna go?',
a1: { ... },
a2: {
value: 'right',
q: 'You're going right. You see the wall, what will you do?',
a1: {
a1: { ... },
a2: { ... }
a3: {
value: 'go back',
q: 'You\'re going back and you see the tiger, what will you do?',
a1: { ... },
a2: { ... }
}
},
a2: { ... },
a3: { ... }
},
a3: { ... }
}
And it's also easy to go pack. Just pop one value from the stack and you're on previous menu.
I have a login screen which has an ExtJs form panel with two button Login and Reset.
Now, I'm trying to add another button below the lofin panel for a new user sign up.
But the button goes out to the bottom of the screen and a scroll bar appears making the page look ugly!
I have these in my login.jsp file:
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-access.css">
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="js/app.js"></script>
And this is my app.js file:
Ext.onReady(function(){
Ext.QuickTips.init();
var login = new Ext.FormPanel({
labelWidth:100,
frame:true,
title:'Member Login',
defaultType:'textfield',
monitorValid:true,
// Specific attributes for the text fields for username / password.
// The "name" attribute defines the name of variables sent to the server.
items:[{
fieldLabel:'Username',
name:'loginUsername',
allowBlank:false
},{
fieldLabel:'Password',
name:'loginPassword',
inputType:'password',
allowBlank:false
}],
buttons: [{
text: 'New User Register',
scale: 'medium',
handler: function()
{
login.getForm().doAction('standardsubmit',{
target : '_self',
method : 'POST',
standardSubmit:true,
formBind: false,
url: 'registration.jsp'
})
}
},{
text: 'Login',
scale: 'medium',
handler: function()
{
login.getForm().doAction('standardsubmit',{
target : '_self',
method : 'POST',
standardSubmit:true,
formBind: true,
url: 'index.jsp'
})
}
},{
text: 'Reset',
scale: 'medium',
handler: function(){
login.getForm().reset();
}
}]
});
// This just creates a window to wrap the login form.
// The login object is passed to the items collection.
var win = new Ext.Window({
layout:'fit',
width:325,
height:175,
closable: false,
resizable: false,
plain: true,
border: false,
items: [login]
});
win.show();
});
I tried adding a new button using the Ext.Createat the end of the above one but it wouldn't work.
I tried having the code in a separate js file and adding the script tag with src to the button file along with the panel file in a separate script tag and even that failed.
Can anybody help me out to create a separate button and my desired position?
Any kind of help is appreciated. Thanks.
I've looked everywhere and I've tried everything I could, but I'm not able to come up with the answer.
NOTE: The code makes the question seem very long and big, but my main query and issue is at the top and bottom of the question.
Im assuming you dont want to add the new button INSIDE the login panel because otherwise you could just add another button to your buttons list anyway. To add a button under your login panel and YET inside the window, do the following steps;
Put your form panel as an item inside a container
Add your button as a second item in the container after your form pannel
Add the container to your window as you did the panel to the window
Voilah! You could also try giving your window and 'id' such as 'id=loginWindow' and then calling the code
Ext.getCmp('loginWindow').add(
{
xtype:button,
text:'Yay!'
}
);
If you need more code specific help, feel free to message me. I know your feel bro <3
please can someone help me with this little binding mess. I'm trying to generate a list of tasks
here is the model definition in my TaskController:
angular.module('yeomantestApp')
.controller 'TaskController', ($scope) ->
$scope.currentTask
$scope.tasks = [
{
id: 1
name: 'write test'
elapsedTime: 15
},
{
id: 2
name: 'run test'
elapsedTime: 32
},
{
id: 3
name: 'write code'
elapsedTime: 22
}
]
So, now I want to render the model with the following view. The view iterates over the task array and build a list of radio buttons for each task.
My problem is, that the model binding to currentTask is somehow not working. When I select any task the currentTask model entry is not updating. But according the tutorials and documentation it should.
<div class="hero-unit" ng-controller="TaskController">
<h1>Tasks</h1>
<h2>current {{currentTask}}</h2>
<form name="taskForm">
<div ng-repeat="task in tasks">
<input type="radio" name="taskGroup" ng-model="currentTask" value="{{task.id}}">{{task.name}} {{task.elapsedTime}}
</div>
</form>
</div>
Changing ng-model attribute to ng-model="$parent.currentTask" should solve your problem.
Here is the jsFiddle: http://jsfiddle.net/dp3xq/8/