how to define an entity inside the function symfony 5 - forms

for exemple this is my function :
/**
* #Route("/companyProfile/{id_Adresse}/{id_Employes}/{id_Contact}", name="company_profile")
* #ParamConverter("Adresse", options={"mapping": {"id_Adresse" : "id"}})
* #ParamConverter("Employes", options={"mapping": {"id_Employes" : "id"}})
* #ParamConverter("Contact", options={"mapping": {"id_Contact" : "id"}})
*/
public function index(Adresse $adresse , Employes $employes , Contact $contact,ContactRepository $contactrepository, EmployesRepository $employesrepository , AdresseRepository $adresserepository ): Response
{
$contactform=$this->createForm(ContactType::class, $Contact);
$employesform=$this->createForm(EmployesType::class, $Employes);
$adresseform=$this->createForm(AdresseType::class, $Adresse);
return $this->render('companyProfile.html.twig', [
'Contact' => $contactrepository->findAll(),
'Employes' => $employesrepository->findAll(),
'Adresse' => $adresserepository->findAll(),
'contactform'=>$contactform->createView(),
'employesform'=>$employesform->createView(),
'adresseform'=>$adresseform->createView()
]);
}
as you can see i declare all my entity in the parameter but i need to add all there ids in the route and that's not what i need , i just want my route to be like this :
/*
*#Route ("/companyProfile", name="company_profile")
*/
thanks in advance for all your answer

The param converter goal is the retrieve an entity from a route parameter. My guess is that you want to get all this entities but not with their ids in the route.
To do so, you will need to get the repository for each of your entity and then get them here. There is a question still : how do you know which entity do you want?
Here is an exemple of your action
/**
* #Route("/companyProfile", name="company_profile")
*/
public function index(ContactRepository $contactRepository, EmployesRepository $employesRepository , AdresseRepository $adresseRepository): Response
{
$contactform = $this->createForm(ContactType::class, $contactRepository->find($contactId);
$employesform = $this->createForm(EmployesType::class, $employesRepository->find($employesId);
$adresseform = $this->createForm(AdresseType::class, $adresseRepository->find($adresseId);
return $this->render('companyProfile.html.twig', [
'Contact' => $contactrepository->findAll(),
'Employes' => $employesrepository->findAll(),
'Adresse' => $adresserepository->findAll(),
'contactform'=>$contactform->createView(),
'employesform'=>$employesform->createView(),
'adresseform'=>$adresseform->createView()
]);
}
You still need a way to get all this new ids variables, but I can't help you more with the given informations.

i tried a different way to display them but when i want to edit for exemple contact , it dosen't work and they show me this error:
An exception has been thrown during the rendering of a template ("Notice: Undefined index: Contact").
here's a screenshot:
enter image description here
and here's my code :
/**
* #Route("/companyProfile/", name="company_profile")
*/
public function index(): Response
{
$Contact = $this->getDoctrine()
->getRepository(Contact::class)
->findAll();
$Employes = $this->getDoctrine()
->getRepository(Employes::class)
->findAll();
$Adresse = $this->getDoctrine()
->getRepository(Adresse::class)
->findAll();
return $this->render('companyProfile.html.twig', [
'Contact' => $Contact,
'Employes' => $Employes,
'Adresse' => $Adresse,
]);
}
this is the edit function:
/**
* #Route("/UpdateContact/{id}",name="editcontact")
*/
public function EditContact(Contact $contact , Request $request ,ManagerRegistry $manager)
{
$contactform=$this->createForm(ContactType::class, $contact);
$contactform->handleRequest($request);
if($contactform->isSubmitted() && $contactform->isValid())
{
$manager = $this->getDoctrine()->getManager();
$manager->persist($contact);
$manager->flush();
return $this->redirectToRoute('company_profile');
}
return $this->render('companyProfile.html.twig', [
'contactform'=>$contactform->createView()
]);
}
and last my twig :
<div class="boxed-list margin-bottom-60">
<div class="boxed-list-headline">
<h3><i class="icon-material-outline-business-center"></i> les contactes d'entreprise</h3>
</div>
</br>
{% for Contact in Contact %}
<div class="listings-container compact-list-layout">
<ul class="list-group">
<li class="list-group-item">
<h3>Contact</h3>
</br></br>
<div class="container pt-3">
<h5>Responsable:</h5>
<p>{{Contact.responsable}}</p>
<h5>N° de tele:</h5>
<p>{{Contact.telephone}}</p>
<h5>Addresse email:</h5>
<p>{{Contact.email}}</p>
<h5>Note:</h5>
<p>{{Contact.note}}</p>
<div class="centered-button margin-top-35">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Modifier
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Form -->
<form method="post" id="add-note">
<div class="form-group">
<label for="nom">Responsable:</label>
<input type="text" class="form-control" placeholder="{{Contact.responsable}}" id="nom">
</div>
<div class="form-group">
<label for="tele">N° de tele:</label>
<input type="text" class="form-control" placeholder="{{Contact.telephone}}" id="telephone">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" placeholder="{{Contact.email}}" id="email">
</div>
<label for="note">Note:</label>
<textarea name="textarea" cols="10" placeholder="{{Contact.note}}" class="with-border"></textarea>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button><i class="icon-material-outline-arrow-right-alt"></i>
</div>
</div>
</div>
</div>

Related

storing form and rout

I have problem on storing form . All my efforts will be damaged if I could not solve it.
The GET method is not supported for this route. Supported methods: POST.
what happen now :
1.When I press on register which is linked to this rout :
Route::POST('/jobs/apply/{id}/', [JobseekerController::class,'applyforjob'])->name('aplpy1');
there will be two scenarios:
if the user has cv it will register the user directly.(works)
if the user has not cv it will direct the user to create cv view .(works)
This is a part of create cv view :
<form method="POST" action="{{route('storing')}}" enctype=multipart/form-data>
#csrf
<input type="hidden" name=job_id value= {{$s}}>
#if (count($errors) > 0)
<div class="alert alert-danger alert-dismissible fade show">
<strong>Opps!</strong> Something went wrong, please check below errors.<br><br>
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
#endif
<div class="card-body">
<div class="container">
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="accordion" class="checkout">
<div class="panel checkout-step">
<div> <span class="checkout-step-number">1</span>
<h4 class="checkout-step-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" > Personal Information</a></h4>
</div>
<div id="collapseOne" class="collapse in">
<div class="checkout-step-body">
<div class="row mt-3 pr-3">
<div class="col-6 ">
<strong>Full Name:</strong>
{!! Form::text('FName', null, array('placeholder' => 'Full Name','class' =>
'form-control pb-4')) !!}
</div>
<div class="col-6">
<div class="row mt-3 mr-2">
<strong>Nationality:</strong>
<select name="Nationality" class="custom-select">
#foreach(\App\Models\Nationality::all() as $nation)
<option value="{{$nation->name}}">{{$nation->name}}</option>
#endforeach
</select>
</div>
<div class="form-group ">
<button type="submit" name="submit" class="btn btn-primary ">{{ __('APPLAY') }}</button
</div>
<input type="hidden" name=job_id value= {{$s}}>
</form>
2.Now Here is the problem:
If I fill all the fields on the form correctly and click apply it works , but if there is missing field or anything not filled as it should be and then click apply , although there is validation on controller it does not work it gives this error:
The GET method is not supported for this route. Supported methods: POST.
Although I am using Post this my rout that I use to store the form
Route::POST('/jobsapply', [JobseekerController::class,'store'])->name('storing');
This my controller for storing:
public function store(Request $request )
{
$this->validate($request, [
'FName' => 'required|alpha|regex:/^([^"!\*\\]*)$/',
'Nationality' => 'required',
]);
$input = $request->all();
$input = $request->except(['_token']);
$cv = new cv();
if ($this->cvsave($cv, $request )) {
$data = Job::all();
$cv = auth()->user()->cv;
return view ('show',compact('cv' ,'data'))->with('success', 'CV created successfully.');
}
$data = Job::all();
return view('show')->with('Failed!', 'error');
}
public function cvsave(cv $cv, Request $request)
{
$cv->FName = $request->FName;
$cv->Nationality = $request->Nationality;
if ($cv->save()) {
$application = new JobApplication;
$id=$request->job_id;
$jobs = Job::find($id)->get();
$application->job_id =$request->job_id;
$user = User::find(auth()->user()->id);
$application->user_id = auth()->user()->id;
$cv = auth()->user()->cv;
$i= $cv->id;
$application->cv_id = $i;
$application->save();
\Session::flash('success', 'Thank you for applying! Wait for the company to respond.!');
return true;
}
return false;
}
I could not know the reason, I have read lots of stuff but still the same error

Spring boot controller not redirecting correctly

I am experiencing a problem with the redirect of the method below in my controller class.
When I click on the submit button it does not redirect me to http://localhost:8080/manager/customers but it redirects to http://localhost:8080/customer/1/manager/customers
Note: the 1 is the customer id that I choose to add orders to
Am I doing something wrong??
#PostMapping(value = "/customer/{id}/orders")
public String projectAddOrders(#PathVariable("id") Long customerId, #RequestParam Long orderId, Model model) {
Order order = orderService.findOrderById(orderId);
Customer customer = customerService.findCustomerById(customerId);
if (customer != null) {
if (!customer .hasOrder(order)) {
customer .getOrders().add(order);
}
customerService.saveCustomer(customer );
model.addAttribute("customer", customerService.findCustomerById(customer Id));
model.addAttribute("orders", orderService.getAllOrders());
return "redirect:manager/customers";
}
return "redirect:manager/customers";
}
This is the HTML from:
<form th:action="#{/customer/{id}/orders(id=${customer.id})}" method="post">
<div class="row">
<div class="col-25">
Customer name: <b th:text="${customer.name}" /><br/>
</div>
</div>
<div class="row">
Customer orders:
<b><span th:each="order, iterStat : ${customer.orders}">
<span th:text="${order.name}"/><th:block th:if="${!iterStat.last}">,</th:block>
</span></b>
</div>
</div>
<br/>
<div class="row">
<div class="col-25">
<label for="user">Add Order</label>
</div>
<div class="col-75">
<select name="orderId">
<option th:each="order: ${orders}"
th:value="${order.id}"
th:text="${order.name}">
</option>
</select>
</div>
</div>
<div class="row">
<input type="submit" value="Add Order">
</div>
</form>
Try turning
return "redirect:manager/customers";
into
return "redirect:/manager/customers";
Mind the slash between 'redirect:' and 'manager'.
Does it work?
I fixed it by adding
registry.addViewController("**/manager/customers").setViewName("redirect:/manager/customers");
in my ApplicationWebMvcConfigurerAdapter implements WebMvcConfigurer class

Form reset issue after get response via API in react js

I am submitting form via redux API call and getting response but on success response I am trying to reset form but that giving issue -
setState(...): Cannot update during an existing state transition (such as withinrenderor another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to 'componentWillMount'.
here is my from file -
=========================
import React from 'react';
import DefaultLayout from '../Layout/DefaultLayout';
//import $ from 'jquery';
import { connect } from 'react-redux';
import { contactRequest } from '../actions/signupActions';
import { bindActionCreators } from 'redux';
import validator from 'validator';
class Contactus extends React.Component {
constructor(props){
super(props);
document.title = "Contact Us";
this.errorMapping = {"100": "Your message has been submitted.",
"102": "Name cannot be empty.",
"104": "Email cannot be empty.",
"103": "Hotel cannot be empty.",
"105": "Incorrect email format.",
"106": "Phone cannot be empty."}
this.state = {name: '',email:'',message :''};
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.baseState = this.state
}
handleInputChange(event) {
this.setState({ [event.target.name]: event.target.value});
}
handleSubmit(event) {
event.preventDefault();
this.props.contactRequest(this.state);
}
render(){
const style_1 = {height: '240px'};
const style_2 = {marginRight: '15px'};
const style_3 = {width: 'auto'};
return(
<DefaultLayout>
<section id="content">
<div className="content-wrap">
<div className="container clearfix">
<div className="col-md-6 bottommargin">
<section id="google-map" className="gmap" style={style_1} ></section>
</div>
<div className="col-md-6">
Click here to Send an Email
Send an Email
<div className="modal fade" id="contactFormModal" tabIndex="-1" role="dialog" aria-labelledby="contactFormModalLabel" aria-hidden="true">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-body">
<div className="contact-widget">
<div className="contact-form-result">
{this.props.resultMessage && this.props.resultMessage.status.map((msg, idx) => {
if(msg === 100) {
this.setState({name : "",email : ""});
return <span key={idx} id="succ_msg">{this.errorMapping[msg]}</span>
} else {
return <span key={idx} id="err_msg">{this.errorMapping[msg]}</span>
}
})
}
</div>
<form className="nobottommargin" id="r_contactform" name="r_contactform" method="post" onSubmit={this.handleSubmit} ref={(el) => this.myFormRef = el} >
<div className="form-process"></div>
<div className="col_half">
<label htmlFor="template-contactform-name">Name <small>*</small></label>
<input type="text" id="template-contactform-name" name="name" value={this.state.name} className="sm-form-control required" onChange={this.handleInputChange} />
</div>
<div className="col_half col_last">
<label htmlFor="template-contactform-email">Email <small>*</small></label>
<input type="email" id="template-contactform-email" name="email" value={this.state.email} className="required email sm-form-control" onChange={this.handleInputChange} />
</div>
<div className="clear"></div>
<div className="clear"></div>
<div className="col_half">
<label htmlFor="template-contactform-message">Message <small>*</small></label>
<textarea className="required sm-form-control" id="template-contactform-message" name="message" value={this.state.message} rows="6" cols="30" onChange={this.handleInputChange}></textarea>
<span className={this.state.messageError ? 'help-block error': '' }>{ this.state.messageError ? this.state.messageError: '' }</span>
</div>
<div className="col_full">
<button className="button button-3d nomargin" type="submit" id="contactform-submit" name="contactform-submit">Send Message</button>
</div>
</form>
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</DefaultLayout>
);
}
}
function mapStateToProps(state){
console.log("View data :"+JSON.stringify(state.Contactdata));
return {
resultMessage: state.Contactdata
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({contactRequest: contactRequest}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps) (Contactus);
getting response in mapStateToProps function and trying to update state where I have applied condition if(msg === 100) .
Please let me know where I am doing wrong.
thanks
The right place to setState is not in the map function, since you are receiving props from redux, you can do it in the componentWillReceiveProps fucntion
class Contactus extends React.Component {
constructor(props){
super(props);
document.title = "Contact Us";
this.errorMapping = {"100": "Your message has been submitted.",
"102": "Name cannot be empty.",
"104": "Email cannot be empty.",
"103": "Hotel cannot be empty.",
"105": "Incorrect email format.",
"106": "Phone cannot be empty."}
this.state = {name: '',email:'',message :''};
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.baseState = this.state
}
componentWillReceiveProps(nextProps) {
nextProps.resultMessage.status.forEach((msg, idx) => {
if(msg === 100) {
this.setState({name : "",email : ""});
}
}
}
handleInputChange(event) {
this.setState({ [event.target.name]: event.target.value});
}
handleSubmit(event) {
event.preventDefault();
this.props.contactRequest(this.state);
}
render(){
const style_1 = {height: '240px'};
const style_2 = {marginRight: '15px'};
const style_3 = {width: 'auto'};
return(
<DefaultLayout>
<section id="content">
<div className="content-wrap">
<div className="container clearfix">
<div className="col-md-6 bottommargin">
<section id="google-map" className="gmap" style={style_1} ></section>
</div>
<div className="col-md-6">
Click here to Send an Email
Send an Email
<div className="modal fade" id="contactFormModal" tabIndex="-1" role="dialog" aria-labelledby="contactFormModalLabel" aria-hidden="true">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-body">
<div className="contact-widget">
<div className="contact-form-result">
{this.props.resultMessage && this.props.resultMessage.status.map((msg, idx) => {
if(msg === 100) {
return <span key={idx} id="succ_msg">{this.errorMapping[msg]}</span>
} else {
return <span key={idx} id="err_msg">{this.errorMapping[msg]}</span>
}
})
}
</div>
<form className="nobottommargin" id="r_contactform" name="r_contactform" method="post" onSubmit={this.handleSubmit} ref={(el) => this.myFormRef = el} >
<div className="form-process"></div>
<div className="col_half">
<label htmlFor="template-contactform-name">Name <small>*</small></label>
<input type="text" id="template-contactform-name" name="name" value={this.state.name} className="sm-form-control required" onChange={this.handleInputChange} />
</div>
<div className="col_half col_last">
<label htmlFor="template-contactform-email">Email <small>*</small></label>
<input type="email" id="template-contactform-email" name="email" value={this.state.email} className="required email sm-form-control" onChange={this.handleInputChange} />
</div>
<div className="clear"></div>
<div className="clear"></div>
<div className="col_half">
<label htmlFor="template-contactform-message">Message <small>*</small></label>
<textarea className="required sm-form-control" id="template-contactform-message" name="message" value={this.state.message} rows="6" cols="30" onChange={this.handleInputChange}></textarea>
<span className={this.state.messageError ? 'help-block error': '' }>{ this.state.messageError ? this.state.messageError: '' }</span>
</div>
<div className="col_full">
<button className="button button-3d nomargin" type="submit" id="contactform-submit" name="contactform-submit">Send Message</button>
</div>
</form>
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</DefaultLayout>
);
}
}
This is the reason, you are doing setState inside render method:
{this.props.resultMessage && this.props.resultMessage.status.map((msg, idx) => {
if(msg === 100) {
this.setState({name : "",email : ""});
.....
When msg==100 will be true, you are doing setState, again it will trigger re-rendering, again setState ....... infinite loop.
Remove that setState it will work.
Use componentWillReceiveProps lifecycle method, and do the setState inside that.
componentWillReceiveProps(newProps) {
newProps.resultMessage.status.forEach((msg, idx) => {
if(msg === 100) {
this.setState({
name : "",
email : ""
});
}
}
}

angular2 formArray conditional validation

I'm trying to impose validation based on a change of one field onto another field inside a formGroup which is inside a FormArray of multiple instances of this group. I'm using mydatepicker on one of the fields. For example, when the date is changed, I then want the Reason for change field in that group only to be validated to check to make sure the first option (value of 0) is not selected. I have 2 problems with this:
When I change the date, the Reason for change field does not get checked for validity right away. It only happens AFTER I change the value of the field to 1 and then to 0. It's default is set to 0 and it should immediately pick this up when I change the date.
When it does finally realize the form is invalid, it does it for ALL the update buttons rather than just the one in the FormGroup whose Date field I have changed.
ts file code:
subscribeDateChange(formGroup){
(<any>this.rfcActionTasksForm).controls.tasks.controls[0].controls['DueDate'];
const tasks = formGroup;
const changes$ = tasks.controls['DueDate'].valueChanges;
changes$.subscribe(dd => {
var arrayControl = this.rfcActionTasksForm.get('tasks') as FormArray;
var item = arrayControl.at(1);
console.log(item);
if(tasks.value['ReasonForChangeId'] == '0'){
tasks.controls['ReasonForChangeId'].setValidators(Validators.pattern(/([1-9])/));
}
});
}
ngOnInit() {
this.rfcActionTasksForm = this._fb.group({
tasks: this._fb.array([this.buildTask()])
});
}
buildTask(): FormGroup {
return this._fb.group({
Id: '',
Action: ['', Validators.required],
Step: '',
AssignedToId: ['', Validators.required],
AssignedToColour: '',
DueDate: ['', Validators.required],
ReasonForChangeId: '',
OriginalDueDate: '',
Completed: '',
OverDue: ''
},{
validator: (formGroup: FormGroup) => {
//return this.validateDays(formGroup);
//console.log(formGroup.controls['DueDate']);
//this.subscribeDateChange(formGroup.controls['DueDate'], formGroup.controls['ReasonForChangeId']);
return this.subscribeDateChange(formGroup);
}
});
}
html:
<form class="multi-col implementation" *ngIf="rfc.Plan [formGroup]="rfcActionTasksForm">
<div class="task-item" formArrayName="tasks" *ngFor="let task of tasks.controls; let i = index">
<div [formGroupName]="i">
<div class="row header-row">
<div class="col-md-12">
<h5 class="no-margin">Step {{i + 1}}</h5>
<input
[style.display]="'none'"
formControlName="Step">
<input
[style.display]="'none'"
formControlName="AssignedToColour">
<input
[style.display]="'none'"
formControlName="Id">
</div>
</div>
<div class="input-row row">
<div class="col-md-11">
<label for="{{'task' + i}}">Action:</label>
<div
[ngClass]="{'has-error': (tasks.get(i + '.Action').touched || tasks.get(i + '.Action').dirty) && !tasks.get(i + '.Action').valid }">
<textarea
rows="6"
id="{{'task' + i}}"
formControlName="Action"></textarea>
<span class="help-block" *ngIf="(tasks.get(i + '.Action').touched || tasks.get(i + '.Action').dirty) && tasks.get(i + '.Action').errors">
<span *ngIf="tasks.get(i + '.Action').errors.required">
Please enter a title.
</span>
</span>
</div>
</div>
<div class="col-md-1 text-center">
<label>Status</label>
<i *ngIf="tasks.get(i + '.Completed').value" class="glyphicon glyphicon-ok-sign ok" title="Completed"></i>
<i *ngIf="!tasks.get(i + '.Completed').value && !tasks.get(i + '.OverDue').value" class="glyphicon glyphicon-minus-sign pending" title="In progress"></i>
<i *ngIf="!tasks.get(i + '.Completed').value && tasks.get(i + '.OverDue').value" class="glyphicon glyphicon-exclamation-sign text-danger" title="Overdue!"></i>
</div>
</div>
<div class="input-row row">
<div class="col-md-3 assigned-to">
<div
[ngClass]="{'has-error': (tasks.get(i + '.AssignedToId').touched || tasks.get(i + '.AssignedToId').dirty) && !tasks.get(i + '.AssignedToId').valid }">
<label for="{{'assignedTo' + i}}">Assigned to:</label>
<div class="color-block" [style.background]="tasks.get(i + '.AssignedToColour').value"></div>
<label class="fa select">
<select
*ngIf="users"
id="{{'assignedTo' + i}}"
formControlName="AssignedToId">
<option
*ngFor="let user of users | trueValueFilter: 'IsActive'"
[value]="user.Id">{{user.Name}}</option>
</select>
</label>
<span class="help-block" *ngIf="(tasks.get(i + '.AssignedToId').touched || tasks.get(i + '.AssignedToId').dirty) && tasks.get(i + '.AssignedToId').errors">
<span *ngIf="tasks.get(i + '.AssignedToId').errors.required">
Please select a user.
</span>
</span>
</div>
</div>
<div class="col-md-3">
<div
[ngClass]="{'has-error': (tasks.get(i + '.DueDate').touched || tasks.get(i + '.DueDate').dirty) && !tasks.get(i + '.DueDate').valid }">
<label for="{{'dueDate' + i}}">Due date:</label>
<my-date-picker
class="datepicker"
type="text"
id="{{'dueDate' + i}}"
formControlName="DueDate"
[options]="myDatePickerOptions"></my-date-picker>
<span class="help-block" *ngIf="(tasks.get(i + '.DueDate').touched || tasks.get(i + '.DueDate').dirty) && tasks.get(i + '.DueDate').errors">
<span *ngIf="tasks.get(i + '.DueDate').errors.required">
Please set a due date.
</span>
</span>
</div>
</div>
<div class="col-md-2">
<label for="{{'reason' + i}}">Reason for change:</label>
<label class="fa select">
<select
class="reason-select"
*ngIf="reasons"
id="{{'reason' + i}}"
formControlName="ReasonForChangeId">
<option
*ngFor="let reason of reasons"
[value]="reason.Id">{{reason.Reason}}</option>
</select>
</label>
</div>
<div class="col-md-3">
<div class="text-center">
<label for="{{'OriginalDueDate' + i}}">Original due date:</label>
<span>{{tasks.get(i + '.OriginalDueDate').value | dateToStringFilter}}</span>
<input
readonly
type="text"
id="{{'OriginalDueDate' + i}}"
[style.display]="'none'"
formControlName="OriginalDueDate">
</div>
</div>
<div class="col-md-1">
<div class="text-center">
<label for="{{'completed' + i}}">Completed:</label>
<div class="checkbox-group">
<input type="checkbox"
type="checkbox"
id="{{'completed' + i}}"
formControlName="Completed">
<label class="checkbox" for="{{'completed' + i}}"></label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div>
<button
class="glyphicon glyphicon-plus-sign btn-icon add"
title="Insert task after this one"
(click)="insertTaskField(i)"></button>
<button
class="glyphicon glyphicon-remove-sign btn-icon delete"
title="Delete this task"
(click)="removeTaskField(i, tasks.get(i + '.Id')?.value)"></button>
<button
*ngIf="!tasks.get(i + '.Id').value"
(click)="saveNewTask(rfc.Id, i);"
[disabled]="!rfcActionTasksForm.valid"
class="pull-right">Save new</button>
<button
*ngIf="tasks.get(i + '.Id')?.value"
[disabled]="!rfcActionTasksForm.valid"
(click)="updateTask(i, tasks.get(i + '.Id')?.value)"
class="pull-right">Update</button>
</div>
</div>
</div>
</div>
</div>
<div class="row last">
<div class="col-md-12">
<button
class="pull-right"
[disabled]="enableUpdateAll === false"
(click)="reOrderTasks()">Update All</button>
</div>
</div>
</form>
I see multiple problems here:
A validator should be of the form:
(control: AbstractControl): {[key: string]: any} => {
if(isValid(control))
return null;
else
return {"myValidator":"invalid thing detected"};
}
You are returning undefined everytime so it can't work.
You cannot subscribe because it means everytime you make a change in your form, you resubscribe to the whole group's valuechanges, that's non-sense.
Forget about valueChanges, you need to do your control synchronously. Check if there is an error and use the setError() method of your children controls.
something like :
(group: FromGroup): {[key: string]: any} => {
if(!isValid(group)){
group.get("myChildControl").setErrors({"localError":"error detected !"});
return {"groupError":"error detected !"};
}
return null;
}
I'm not sure if you should use the second parameter of setError(errors,{emitEvent:false}) to avoid propagation or not.

My form is not populating when there is some validation error in the input data. Laravel Collective

Hope yo are all doing great.
I am using Laravel 5.3 and a package LaravelCollective for form-model binding.
I have subjects array that I want to validate and then store in database if there is no error in the input data.
The following snippets show the partial view of form, other views, rules for validations and controller code.
UserProfile.blade.php
<!-- Panel that Adds the Subject - START -->
<div class="col-md-12">
<div class="panel panel-default" id="add_Subject_panel">
<div class="panel-heading">Add Subject(s):</div>
<div class="panel-body">
{!! Form::open( array('method'=>'post', 'url'=>route('user.store.subject', 1)) ) !!}
#include('user.partials.subjects', ['buttonText'=>'Add Subject(s)'])
{!! Form::close() !!}
</div>
</div>
</div>
<!-- Panel that Adds the Subject - END -->
subjects.blade.php
#if (count($errors) > 0)
<div class="alert alert-danger">
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
<div class="subject-list">
<div class="input-group subject-input">
<input type="text" name="name[]" class="form-control" value="" placeholder="Subject" />
<span class="input-group-btn">
<span class="btn btn-default">Primary subject</span>
</span>
</div>
</div>
<div class="text-right">
<br />
<button type="button" class="btn btn-success btn-sm btn-add-subject"><span class="glyphicon glyphicon-plus"></span> Add Subject</button>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4 text-right">
<button type="submit" class="btn btn-primary">
{{ $buttonText }} <i class="fa fa-btn fa-subject"></i>
</button>
</div>
</div>
#push('scripts')
{{-- <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> --}}
<script src="{{ asset('scripts/jquery-2.2.4.min.js') }}" type="text/javascript" charset="utf-8" async defer></script>
<script>
$(function()
{
$(document.body).on('click', '.btn-remove-subject', function(){
$(this).closest('.subject-input').remove();
});
$('.btn-add-subject').click(function()
{
var index = $('.subject-input').length + 1;
$('.subject-list').append(''+
'<div class="input-group subject-input" style="margin-top:20px; margin-bottom:20px;">'+
'<input type="text" name="name['+index+']" class="form-control" value="" placeholder="Subject" />'+
'<span class="input-group-btn">'+
'<button class="btn btn-danger btn-remove-subject" type="button"><span class="glyphicon glyphicon-remove"></span></button>'+
'</span>'+
'</div>'
);
});
});
</script>
#endpush
I want to validate all the subjects passed as an array to the controller using a custom created form request. the following is the code for that form request
SubjectRequest.php
<?php
namespace App\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
class SubjectRequest extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*
* #return bool
*/
public function authorize()
{
return true;
}
/**
* Get the validation rules that apply to the request.
*
* #return array
*/
public function rules()
{
// dd("Rules Area");
foreach($this->request->get('name') as $key => $val)
{
$rules['name.'.$key] = 'required|min:5|max:50';
}
// dd($rules);
return $rules;
}
public function messages()
{
// dd('Message Area. . .');
$messages = [];
foreach($this->request->get('name') as $key => $val)
{
$messages['name.'.$key.'.required'] = ' Subject Name '.$key.'" is required.';
$messages['name.'.$key.'.min'] = ' Subject Name '.$key.'" must be atleast :min characters long.';
$messages['name.'.$key.'.max'] = ' Subject Name '.$key.'" must be less than :max characters.';
}
// dd($messages);
return $messages;
}
}
the following is the code for controller method I am using to store inputted array data to database.
public function storeSubjects(SubjectRequest $request)
{
$data = $request->all();
// save logic
dd($data);
}
Problem:
My form is not populating when there is some validation error in the input data.
After getting validation errors, my input fields are blank.
Problem
In subject.blade.php, your code looks like
<input type="text" name="name[]" class="form-control" value="" placeholder="Subject" />
Your fields are not populating because you have left value attribute blank.
Solution:
Pass the old value to solve your problem.
<input type="text" name="name[]" class="form-control" value="{{old('name[]')}}" placeholder="Subject" />
Use Form Model Binding instead
https://laravelcollective.com/docs/5.3/html#form-model-binding
{{ Form::model($user, [....]) }}
{{ Form::text('firstname', null, [...]) }}
{{ Form::close() }}