Manual rendering failed - html

Manually rendering the page, but it didn't work as I thought
#html
<input class="" for="{{art_form.title}}" required>
#form.py
class ArticleForm(forms.ModelForm):
class Meta:
model = Article
fields = ['title', 'body', 'subject']
#google Elements;Actual output code
<input class="" for="<input type="text" name="title" value="这是一篇测试文章111" maxlength="255" required id="id_title">" required>

ok,render the form through 'form. Py' to achieve the effect.
Or add class and ID to let the front end render.
#form.py
class ArticleForm(forms.ModelForm):
class Meta:
model = Article
fields = ['title', 'body', 'subject']
error_messages = {
'title': {
'required': _('请输入标题'),
'max_length': _('标题最多50个字'),
'min_length': _('内容太少,请重新填写'),
},
'body': {
'required': _('请输入内容'),
'min_length': _('内容太少,请重新填写'),
}
}
widgets = {
#字段样式
'title': forms.TextInput(
attrs={'class': 'form-control',
'placeholder': '请输入标题(最多50个字)'})
}

Related

How to validate dynamic form in angular

Below is my code. According to the loop count, fName will increase. currently I am using ng-bootstrap-form-validation for validation. The issue if I validate using formControlName that's not working it's duplicating if one field(fName) is correct all the fields become correct.
Below is my HTML code,
<form [formGroup]="formGroup" (validSubmit)="onSubmit()">
<div class="results-traveler" *ngFor="let item of createLoopRange(selectedDataDetails[0].Adult); let ii= index;">
<div class="row">
<div class="col-12 heading" *ngIf="ii == 0 else travelCount">Traveller {{ii}}</div>
<div class="col-6 M-full-div">
<label>First Name</label>
<div class="inputContainer form-group">
<input class="InputField form-control" type="text" placeholder="Type Here" formControlName="fName" id="fName_{{i}}" />
</div>
</div>
</div>
</div>
<a class="SearchBtn" type="submit">CONTINUE</a>
</form>
Below is the typescript code I am using,
ngOnInit(): void {
this.bookingDetailsValidate();
}
bookingDetailsValidate() {
this.formGroup = new FormGroup({
fName: new FormControl('', [
Validators.required,
Validators.pattern(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)
])
});
}
onSubmit() {
console.log(this.formGroup);
}
Can anyone please guide me on how to do this. Thanks.
for fName use FormArray then add FormControl to FormArray and you can validate FormArray and every FormControl inside FormArray
example:
this.formGroup = new FormGroup({
fName: new FormArray([], [
Validators.required
])
});
...
const arrayOfNameControl = this.formGroup.get('fName') as FormArray
arrayOfNameControl.insert(0, new FormControl('',[
Validators.required,
Validators.pattern(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)
]));
You need form array here. Please refer the link.
Angular form array

Uncaught Error: Can't resolve all parameters for Component: ([object Object]?)

So, before You read the whole error stack, keep in mind that at this time I cant pinpoint the exact piece that causes the problem. However, I will disclose the code below the error stack. So, my only question is: what parameters can't be resolved?
If you like, you can test my application for yourself. It is a simple default angular 6 application with all the default settings you get from the following command below:
ng new app-name
let's begin with the error. The application starts like normal. When I try to run the code, this error pops up: Uncaught Error: Can't resolve all parameters for Component: ([object Object]?). You can read the full error stack below.
Uncaught Error: Can't resolve all parameters for Component: ([object Object]?).
at syntaxError (compiler.js:1016)
at CompileMetadataResolver.push../node_modules/#angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (compiler.js:10917)
at CompileMetadataResolver.push../node_modules/#angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata (compiler.js:10810)
at CompileMetadataResolver.push../node_modules/#angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:10429)
at CompileMetadataResolver.push../node_modules/#angular/compiler/fesm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata (compiler.js:10291)
at compiler.js:23865
at Array.forEach (<anonymous>)
at compiler.js:23864
at Array.forEach (<anonymous>)
at JitCompiler.push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:23861)
syntaxError # compiler.js:1016
push../node_modules/#angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata # compiler.js:10917
push../node_modules/#angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata # compiler.js:10810
push../node_modules/#angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata # compiler.js:10429
push../node_modules/#angular/compiler/fesm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata # compiler.js:10291
(anonymous) # compiler.js:23865
(anonymous) # compiler.js:23864
push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._loadModules # compiler.js:23861
push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents # compiler.js:23839
push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync # compiler.js:23799
push../node_modules/#angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync # platform-browser-dynamic.js:143
push../node_modules/#angular/core/fesm5/core.js.PlatformRef.bootstrapModule # core.js:4352
./src/main.ts # main.ts:11
__webpack_require__ # bootstrap:76
0 # main.ts:12
__webpack_require__ # bootstrap:76
checkDeferredModules # bootstrap:43
webpackJsonpCallback # bootstrap:30
(anonymous) # main.js:1
As you see, there is no easy way of telling which part of my typescript is causing the problem. However, The application runs fine without the code in component.ts shown below. So, there is definitely something wrong with my typescript component.ts
the component.ts is shown below:
import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, Directive} from '#angular/core';
import { FormGroup } from '#angular/forms';
import { DefineBusinessRuleService } from '../services/define/define-business-rule.service';
import { DefineBusinessRuleNamespace } from '../model/business-rule-namespace';
#Component({
selector: 'app-define-business-rule',
templateUrl: './define-business-rule.component.html',
styleUrls: ['./define-business-rule.component.css']
})
export class DefineBusinessRuleComponent implements OnInit {
// interfaces
headers : Headers;
output: any;
#Input() minValue: string;
#Input() maxValue: string;
#Input() attribute : Array<string>;
#Input() table : Array<string>;
submitted = false;
#Input() businessRuleType : Array<string>;
ruletypes : Array<string>;
ruletype : string;
constructor(
private defineBusinessRuleService: DefineBusinessRuleService
,private model : any
) {
this.table = ['table1', 'table2', 'table3'];
this.attribute = ['attribute1', 'attribute2', 'attribute3'];
this.ruletypes = [
// atrribute
'AttributeRange',
'AttributeCompare',
'AttributeList',
'AttributeOther',
'TupleCompare',
'TupleOther'
]
model = {
minValue : 5,
maxValue : 10,
name : 'RangeRule',
description : 'This is a Range Rule',
table1 : this.table[0],
column1 : this.attribute[2],
errorMsg : 'Error message'
};
}
get diagnostic() { return JSON.stringify(this.model); }
defineNewBusinessRule() {
//this.model = new DefineBusinessRuleService(42, 50, '', '', '', '', '');
}
saveAttributeRangeRule(){
this.output = {
database_id : 1,
minValue : this.minValue,
maxValue : this.maxValue,
table1 : this.table,
column1 : this.attribute
}
this.output.stringify;
this.defineBusinessRuleService.saveAttributeRangeRule(this.output);
}
saveAttributeCompareRule(){
this.output = {
database_id : 1,
table1 : this.table,
//table2 : this.table2,
column1 : this.attribute,
//column2 : this.attribute2,
//value : this.value
}
this.output.stringify;
//this.defineBusinessRuleService.saveAttributeCompareRule(this.output);
}
ngOnInit(){
}
onSelect(){
}
onSubmit() {
this.submitted = true;
this.ruletype = this.ruletypes[0];
switch(this.ruletype){
case "AttributeRange" : {
this.saveAttributeRangeRule();
break;
};
case "AttributeCompare" : {
this.saveAttributeCompareRule();
break;
};
}
}
}
Thanks for reading this! If you are visually orientated like me, then this form might help you understand what this code should do. However, it's off topic, since i'm certain enough that it doesn't cause operational problems in angular. keep that in mind!
the related html form is shown below
<br>
<br>
<main role="main" class="container">
<div class="container">
<h1>Define Business Rule</h1>
<form (ngSubmit)="onSubmit()" #defineBusinessRuleForm="ngForm">
<div class="form-group">
<label for="minValue">Minimum Value</label>
<input type="text" class="form-control" id="minValue">
</div>
<div class="form-group">
<label for="maxValue">Maximum Value</label>
<input type="text" class="form-control" id="maxValue">
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name"
#name="ngModel">
<div [hidden]="name.valid || name.pristine"
class="alert alert-danger">
Name is required
</div>
</div>
<div class="form-group">
<label for="description">Description</label>
<input type="text" class="form-control" id="description" required>
</div>
<div class="form-group">
<label for="table">Table</label>
<select class="form-control" id="table" required>
<option *ngFor="let tbl of table" [value]="table">{{tbl}}</option>
</select>
</div>
<div class="form-group">
<label for="attribute">Attribute</label>
<select class="form-control" id="attribute" required>
<option *ngFor="let attr of attribute" [value]="attribute">{{attr}}</option>
</select>
</div>
<div class="form-group">
<label for="errorMsg">Error Message</label>
<input type="text" class="form-control" id="errorMsg" required>
</div>
<button type="submit" class="btn btn-success" [disabled]="!defineBusinessRuleForm.form.valid">Submit</button>
<button type="button" class="btn btn-default" (click)="defineNewBusinessRule(); defineBusinessRuleForm.reset()">Define New BR</button>
</form>
</div>
</main>
The error is in the model definition location.
private model: any should be defined as a parameter outside of a constructor.
By placing it in the constructor, the compiler is trying to resolve any class, and, naturally is unable to do so.
Modify your code this way:
export class DefineBusinessRuleComponent implements OnInit {
private model : any
constructor() {
this.model = {
// your model definition
};
}
// rest of the code
}

Convert html to checkbox razor view

I have the following checkbox:
<input type="checkbox" id="seaMode" name="transportMode" value="Origin Service" />
<label for="seaMode" data-label="Sea">Sea</label>
However I am using razor view for that binding the view to the model:
#foreach (var val in Model.TransportList)
{
#Html.Label(val.Value, htmlAttributes: new { #for = label })
<i class=#val.Image></i>
#Html.CheckBox(label, false, new { value = #val.Text, name = "transportMode" })
}
Right now, it is returning it as below:
<label for="SEAMode">SEA</label>
<i class="icon-sea"></i>
<input id="SEAMode" name="SEAMode" type="checkbox" value="1">
<input name="SEAMode" type="hidden" value="false">
Any one good with html can please help me to add the correct class and attribute so as to render the html as the 1st one?
For info, val.Value has SEA and val.Text = 1 and so on.
If you're trying to add a class and data attributes then this should do it:
#Html.CheckBox(label, false, new { value = #val.Text, name = "transportMode", #class = "myCheckBox", data_label = "my data label value" })
Let me know if this helps.

How to remove 'label' decorator from Zend 2 form

I have the simple Radio element:
$form->add([
'name' => 'account_type',
'type' => 'Zend\Form\Element\Radio',
'options' => [
'label' => 'Account type',
'value_options' => [
1 => 'Employer',
2 => 'Performer'
]
]
]
);
But in my view I get this html:
<div class="zf-form-el-account_type">
<label for="account_type">Account type</label>
<div class="zf-radio">
<label>
<input type="radio" name="account_type" class="account_type" value="1">Employer
</label>
</div>
<div class="zf-radio">
<label>
<input type="radio" name="account_type" class="account_type" value="2">Performer
</label>
</div>
</div>
How I can to remove this empty label wrapper around an radio element? Or how I can to insert some tag after radio element? Thanks.
I extended standard view helper:
<?php
namespace Application\Form\View\Helper;
use Zend\Form\View\Helper\FormRadio;
use Zend\Form\Element\Radio as RadioEl;
class FormRadioElement extends FormRadio
{
protected function renderOptions(RadioEl $element, array $options, array $selectedOptions, array $attributes)
{ ...
... and set template in helper like:
$template = '%s%s';
Then I declared it in my bootstrap:
public function getViewHelperConfig() {
return [
'invokables' => [
'formRadioHelper' => 'Application\Form\View\Helper\FormRadioElement',
]
];
}
... and called in my view like:
<?php echo $this->formRadioHelper($form->get('account_type'))?>

AngularJS - Building a dynamic form based on a json

I am using the AngularDynamicform to generate a dynamic form in page and the fields are displaying fine in a horizontal manner. But I want to display the input fields with in different sections in the page.
In my page
<div class="box-content">
<h4 class="page-header">New Contact</h4>
<dynamic-table-form fields="fields" data="data" class="form-horizontal">
<input dynamic-field-type="string" ng-model="value" type="text" maxlength="{{config.maxLength}}" size="{{config.maxLength}}">
<input dynamic-field-type="date" ng-model="value" type="date">
<ul dynamic-field-type="array">
<li dynamic-field-child>
<ng-transclude></ng-transclude>
<button ng-click="removeChild(childKey)">Remove</button>
</li>
<button ng-click="addChild()">Add Another</button>
</ul>
<select dynamic-field-type="select" ng-model="value" ng-options="option.value as option.caption for option in config.options"></select>
<input dynamic-field-type="integer" ng-model="value" type="number" size="{{config.maxLength}}" maxlength="{{config.maxLength}}" min="{{config.minValue}}" max="{{config.maxValue}}">
<button ng-click="create()">Save</button>
</dynamic-table-form>
<button ng-click="create()">save</button>
And in my controller
$scope.fields = [
{
caption: 'Name',
model: 'name',
type: 'string',
maxLength: 25
},
{
caption: 'Date of Birth',
model: 'dateOfBirth',
type: 'date'
},
{
caption: 'Employee name',
model: 'employee.name',
type: 'string',
maxLength: 25
},
{
caption: 'Employee City',
model: 'employee.city',
type: 'string',
maxLength: 25
}
];
for example, I want to display the last two fields(Employee name & Employee City)in other section called Employee details. How can I do it?
Thanks in advance.