form: FormGroup;
createMyForm() {
this.form = new FormGroup<any>({
firstName: new FormControl<any>('', [Validators.required]),
lastName: new FormControl<any>('', { nonNullable: true }),
});
}
How to add { nonNullable: true } to firstName
I am trying to add {nonNullable: true } to the form control.
lastName: new FormControl('', { nonNullable: true }),
I am able to add {nonNullable: true } to the control which doesnt have validations, but for the form control which has validations I am not able to add {nonNullable: true }.
firstName: new FormControl('', [Validators.required]),
createMyForm() {
this.form = new FormGroup<any>({
firstName: new FormControl<any>('', {
nonNullable: true,
validators: [Validators.required]
}),
lastName: new FormControl<any>('', { nonNullable: true })
});
}
if all fields has nonNullable:true and you are comfortable injecting form-builder, you can use NonNullableFormBuilder
Related
I have a KendoUI grid which uses SignalR. Whilst the grid itself works fine if you update the data inline or incell, it doesn't work if I update the data in a form which uses ajax to post it to my controller.
It was my understanding that, if I injected my hub into my controller and then called (whichever I needed, create, update or destroy) :
await _fixtureHub.Clients.All.SendAsync("update", model);
or
await _fixtureHub.Clients.All.SendAsync("update", model);
That it would tell the clients that the data had been changed/created and the grid would update to reflect that change. This isn't happening however and I'm wondering what I've done wrong or missing.
To start, here is my signalR bound grid.
$('#fixture_grid').kendoGrid({
dataSource: {
schema: {
model: {
id: "Id",
fields: {
Created_Date: {
type: "date"
},
Commencement_Date: {
type: "date"
}
}
}
},
type: "signalr",
autoSync: true,
transport: {
signalr: {
promise: fixture_hub_start,
hub: fixture_hub,
server: {
read: "read",
update: "update",
create: "create",
destroy: "destroy"
},
client: {
read: "read",
update: "update",
create: "create",
destroy: "destroy"
}
}
}
},
autoBind: true,
sortable: true,
editable: false,
scrollable: true,
columns: [
{
field: "Created_Date",
title: "Created",
format: "{0:dd/MM/yyyy}"
},
{
field: "Commencement_Date",
title: "Commencement",
format: "{0:dd/MM/yyyy}"
},
{
field: "Charterer",
template: "#if(Charterer !=null){# #=Charterer_Name# #} else { #--# }#"
},
{
field: "Region",
template: "#if(Region !=null){# #=Region_Name# #} else { #--# }#"
}
]
});
Here is the relative hub for that grid:
var fixture_url = "/fixtureHub";
var fixture_hub = new signalR.HubConnectionBuilder().withUrl(fixture_url, {
transport: signalR.HttpTransportType.LongPolling
}).build();
var fixture_hub_start = fixture_hub.start({
json: true
});
Here is the KendoUI wizard with form integration which I update the grid with, this form can process either a creation or an update data, this is achieved by checking the Id that is passed in. Whereby 0 equals new and >0 is existing.
function wizard_fixture() {
let wizard_name = "#wizard-fixture";
//Load Wizard
$(wizard_name).kendoWizard({
pager: true,
loadOnDemand: true,
reloadOnSelect: false,
contentPosition: "right",
validateForms: true,
deferred: true,
actionBar: true,
stepper: {
indicator: true,
label: true,
linear: true
},
steps: [
{
title: "Step 01",
buttons: [
{
name: "custom",
text: "Save & Continue",
click: function () {
let wizard = $(wizard_name).data("kendoWizard");
var validatable = $(wizard_name).kendoValidator().data("kendoValidator");
if (validatable.validate()) {
$.ajax({
type: "POST",
traditional: true,
url: "/Home/Process_Fixture",
data: $(wizard_name).serialize(),
success: function (result) {
...do stuff
},
error: function (xhr, status, error) {
console.log("error")
}
});
}
}
}
],
form: {
formData: {
Id: fixtureviewmodel.Id,
Created_User: fixtureviewmodel.Created_User,
Created_Date: fixtureviewmodel.Created_Date,
Connected: fixtureviewmodel.Connected
},
items: [
{
field: "Fixture_Id",
label: "Id",
editor: "<input type='text' name='Id' id='Fixture_Id' /> "
},
{
field: "Created_User",
label: "Created user",
editor: "<input type='text' name='Created_User' id='Created_User_Fixture' />"
},
{
field: "Created_Date",
id: 'Created_Date_Fixture',
label: "Created date",
editor: "DatePicker",
}
]
}
},
],
});
I've shortened this to demonstrate the custom button and the ajax posting that happens to Process_Fixture. Here is my controller which handles that:
public async Task<JsonResult> Process_Fixture(Fixture model)
{
if (model.Id == 0)
{
if (ModelState.IsValid)
{
var fixture = await _fixture.CreateAsync(model);
Update connected clients
await _fixtureHub.Clients.All.SendAsync("create", model);
return Json(new { success = true, data = fixture.Id, operation = "create" });
}
return Json(new { success = false });
}
else
{
var fixture = await _fixture.UpdateAsync(model);
await _fixtureHub.Clients.All.SendAsync("update", model);
return Json(new { success = true, data = fixture.Id, operation = "update" });
}
}
As you can see, I have injected my hub and I have called the "create" message to it which I believed would force the grid to update with whatever had changed or been created.
Here is the hub itself:
public class FixtureHub : DynamicHub
{
private readonly IRepository<Fixture> _fixtures;
private readonly IRepository<ViewGridFixtures> _viewFixtures;
public FixtureHub(IRepository<Fixture> fixtures, IRepository<ViewGridFixtures> viewFixtures)
{
_fixtures = fixtures;
_viewFixtures = viewFixtures;
}
public override Task OnConnectedAsync()
{
Groups.AddToGroupAsync(Context.ConnectionId, GetGroupName());
return base.OnConnectedAsync();
}
public override Task OnDisconnectedAsync(Exception e)
{
Groups.RemoveFromGroupAsync(Context.ConnectionId, GetGroupName());
return base.OnDisconnectedAsync(e);
}
public class ReadRequestData
{
public int ViewId { get; set; }
}
public IQueryable<ViewGridFixtures> Read()
{
IQueryable<ViewGridFixtures> data = _viewFixtures.GetAll();
return data;
}
public string GetGroupName()
{
return GetRemoteIpAddress();
}
public string GetRemoteIpAddress()
{
return Context.GetHttpContext()?.Connection.RemoteIpAddress.ToString();
}
}
I need some help here in understanding how I can tell the hub that the update/create/destroy has been called and it needs to do something. At the moment, I feel like injecting the hub and then calling the clients.all.async isn't the right way. With ajax it seems to ignore it and I wonder if the two technologies are working against each other.
I have a many to many relationship between: Step and Control Through ControlsConfig.
When creating a Control object and call addStep function and specify the additional attributes (which exist in the relation table), Sequelize creates the records in the relational table ControlsConfig but the additional attributes are NULLs.
PS: The tables are creating correctly in the database.
Table 1: Step
Table 2: Control
Relation table: ControlsConfig
Step
var Step = sequelize.define('Step', {
title: { type: DataTypes.STRING, allowNull: false },
description: DataTypes.STRING,
type: { type: DataTypes.ENUM('task', 'approval'), allowNull: false, defaultValue: 'task' },
order: DataTypes.INTEGER
});
Step.associate = function(models) {
models.Step.belongsTo(models.User);
models.Step.belongsTo(models.Template);
models.Step.hasMany(models.Action);
};
Control
var Control = sequelize.define('Control', {
label: { type: DataTypes.STRING, allowNull: false },
order: { type: DataTypes.INTEGER },
type: { type: DataTypes.ENUM('text', 'yes/no') },
config: { type: DataTypes.TEXT },
controlUiId: { type: DataTypes.STRING }
});
Control.associate = function(models) {
models.Control.belongsTo(models.Section);
};
ControlsConfigs
module.exports = (sequelize, DataTypes) => {
var ControlsConfig = sequelize.define('ControlsConfig', {
visibility: { type: DataTypes.ENUM('hidden', 'readonly', 'editable', 'required') },
config: { type: DataTypes.TEXT }
});
ControlsConfig.associate = function(models) {
models.Control.belongsToMany(models.Step, { through: models.ControlsConfig });
models.Step.belongsToMany(models.Control, { through: models.ControlsConfig });
models.ControlsConfig.belongsTo(models.Template);
};
return ControlsConfig;
};
Insertion:
try {
var step1 = await Step.create({ /*bla bla*/ });
var control1 = await Control.create({ /*bla bla*/ });
var OK = await control1.addStep(step1, {through: { config: 'THIS FIELD ALWAYS APPEARS NULL' }});
} catch (error) { /* No errors*/ }
I am following the same strategy stated at the documentation
//If you want additional attributes in your join table, you can define a model for the join table in sequelize, before you define the association, and then tell sequelize that it should use that model for joining, instead of creating a new one:
const User = sequelize.define('user', {})
const Project = sequelize.define('project', {})
const UserProjects = sequelize.define('userProjects', {
status: DataTypes.STRING
})
User.belongsToMany(Project, { through: UserProjects })
Project.belongsToMany(User, { through: UserProjects })
//To add a new project to a user and set its status, you pass extra options.through to the setter, which contains the attributes for the join table
user.addProject(project, { through: { status: 'started' }})
You have to pass edit: true to the addProject and addStep method.
See this answer it has a similar issue
Sequelize belongsToMany additional attributes in join table
The only thing I changed about this form code was adding a validator for the password match and now the variable invalid is never false.
Form Setup:
this.CreateUserForm = new FormGroup({
Email: new FormControl(null, Validators.required), // Create Email validator!
Password: new FormControl(null, Validators.required),
ConfirmPassword: new FormControl(null, Validators.required),
FirstName: new FormControl(null, Validators.required),
LastName: new FormControl(null, Validators.required),
MiddleInitial: new FormControl(null) // Write custom validators for single character, upper case, letters only
}, PasswordValidation.MatchPassword);
Password Match:
import { AbstractControl } from '#angular/forms';
export class PasswordValidation
{
static MatchPassword(AC: AbstractControl)
{
var data = AC.value;
let password = AC.get('Password'); // to get value in input tag
let confirmPassword = AC.get('ConfirmPassword'); // to get value in input tag
if (password.value != confirmPassword.value)
{
AC.get('ConfirmPassword').setErrors({ MatchPassword: true })
} else
{
AC.get('ConfirmPassword').setErrors({});
return null;
}
}
}
in case of valid don't setErros, just return null.
if (password.value != confirmPassword.value)
{
AC.get('ConfirmPassword').setErrors({ MatchPassword: true })
} else
{
// AC.get('ConfirmPassword').setErrors({});
return null;
}
I have the following Schema:
// userSchema
{
_id: Schema.ObjectId,
email: { type: String, unique: true },
password: String,
boxes: [boxSchema]
}
// boxSchema
{
_id: Schema.ObjectId,
boxId: { type: String, unique: true },
boxName: String
}
I have data like this:
{
_id: random,
email: em#i.l,
password: hash,
boxes: [{ "boxId" : "box1", "boxName" : "Box 1"},
{ "boxId" : "box2","boxName" : "Box 2"},
{ "boxId" : "box3","boxName" : "Box 3"}]
}
I am trying to remove an element from boxes array with boxId: box1 and the code I tried was this:
User.findOne({
_id: req.body.id
})
.then(function (user) {
if (user) {
for (i in user.boxes)
if (user.boxes[i].boxId === 'box1')
user.boxes[i].remove();
res.json('removed');
}
})
.catch(function (err) {
....
});
But what happens is that it removes all the boxes which is residing, instead of the boxId: box1
What about using filter
User.findOne({
_id: req.body.id
})
.then(function (user) {
if (user) {
user.boxes = user.boxes.filter(function(box){
return box.boxId !== 'box1'
})
res.json('removed');
}
})
.catch(function (err) {
....
});
There are many ways to remove element from the array and are as follows:
1) Delete(): using this function will remove the element but will not change the array size and keep blank object after removal of element.
2)splice(): It works similar to delete() but remove blank places in array after removal of element.
3)filter(): It takes function as an argument and removes the element efficiently.
I would like to set programmatically the model of my datasource.
Something like:
var ds = new kendo.data.DataSource({ //... });
var mod = kendo.data.Model.define({
fields: data
});
ds.model = mod;
Is it possible? How?
Thank you.
Of course, but you have to set it up in DataSource field schema.model (see schema.model reference)
As indicated on this page, you will have something like this :
// Definition of your model
var Product = kendo.data.Model.define({
id: "ProductID",
fields: {
ProductID: {
//this field will not be editable (default value is true)
editable: false,
// a defaultValue will not be assigned (default value is false)
nullable: true
},
ProductName: {
validation: { //set validation rules
required: true
}
},
UnitPrice: {
//data type of the field {Number|String|Boolean|Date} default is String
type: "number",
// used when new model is created
defaultValue: 42,
validation: {
required: true,
min: 1
}
}
}
});
// Map this model to your DataSource object
var dataSource = new kendo.data.DataSource({
schema: {
model: Product // Use the existing Product model
}
});