I can't write in input inside the expansion-panel, the focus is removed once I click on the input.
here is it my code!
<ng-container *ngFor="let i of listSousCategorie">
<mat-expansion-panel class="childPanel" [expanded]="true" hideToggle disabled style=" background:#ecfaff;">
<div class="childPanel_body2 mat-badge-large" fxLayout="row" fxFlex fxLayoutAlign="start center" >
<div style="padding-left:1em" fxFlex="grow" >{{i.libelle}}</div>
<mat-form-field style="width:50px" appearance="standard" [formGroup]="form">
<mat-label>Note</mat-label>
<input type="text" matInput formControlName="Note" " >
</mat-form-field>
</div>
</mat-expansion-panel>
</ng-container>
Related
I created a form using angular reactiveforms. I printed default data to my form and this data is coming, but when I look at the console part, "formGroup expects a FormGroup instance. Please pass one in." error, what is the solution to this?
Html Code;
<form [formGroup]="sampleInfoFormGroup">
<div class="row">
<div class="col-md-4">
<mat-form-field appearance="fill">
<mat-label class="text-dark">{{'OrderNo' | translate}}</mat-label>
<input formControlName="workOrderName" matInput readonly >
</mat-form-field>
</div>
<div class="col-md-4">
<mat-form-field appearance="fill">
<mat-label class="text-dark">{{'Fabric' | translate}}</mat-label>
<input matInput formControlName="fabric" readonly >
</mat-form-field>
</div>
<div class="col-md-4">
<mat-form-field appearance="fill">
<mat-label class="text-dark">{{'Customer' | translate}}</mat-label>
<input matInput formControlName="customer" readonly >
</mat-form-field>
</div>
</div>
<mat-divider></mat-divider>
<div class="row mt-2">
<div class="col-md-4">
<mat-form-field appearance="fill">
<mat-label class="text-dark">{{'ModelName' | translate}}</mat-label>
<input matInput formControlName="workOrderModelName" readonly >
</mat-form-field>
</div>
<div class="col-md-4">
<mat-form-field appearance="outline">
<mat-label class="text-dark">{{'RollNumber' | translate}}</mat-label>
<input matInput formControlName="rollName">
</mat-form-field>
</div>
<div class="col-md-4">
<mat-form-field appearance="outline">
<mat-label class="text-dark">{{'50*50(LISTED)' | translate}}</mat-label>
<input matInput formControlName="testFabricList">
</mat-form-field>
</div>
</div>
Ts Code ;
createSampleInfoForm() {
console.log(this.sampleTable)
this.sampleInfoFormGroup = this.formBuilder.group({
workOrderName: [this.sampleTable.workOrderName],
fabric: [""],
customer: [""],
workOrderModelName: [this.sampleTable.workOrderModelName],
rollName: [this.sampleTable.rollName],
testFabricList: [this.sampleTable.testFabricList],
workShopName: [this.sampleTable.workShopName],
testFabricSample: [this.sampleTable.testFabricSample],
kID: [this.sampleTable.KID],
sewingReason: [this.sampleTable.sewingReason],
moldName: [this.sampleTable.moldName],
explanation: [this.sampleTable.explanation],
washingArrivalDate: [this.sampleTable.washingArrivalDate],
washingDepartureDate: [this.sampleTable.washingDepartureDate],
});
}
getSampleTableById(id: number) {
this.sampleTableService.getSampleTableById(id).subscribe(data => {
if (data) {
this.sampleTable = data;
this.createSampleInfoForm();
}
})
}
I tried to create the form with formcontrol instead of formgroup but it didn't work
Your FormGroup is created once the async call completed. In the meantime your formgroup is not defined, which causes the error. Add an ngIf like that
<form *ngIf="sampleInfoFormGroup" [formGroup]="sampleInfoFormGroup">
I have a form this form takes up 1/3 of the screen adjacent to the left , so ı want to this form display with full width (occupy the entire screen from left to right.). I searched on google and tried some methods which are width : 100% , fxFlexFill, (fxLayout="column" fxLayoutAlign=" stretch"), fxFlexs .Maybe i used them wrong . I couldn't do it in any way.
calander page:
<form [formGroup]="userForm" (ngSubmit)="sendRequest()">
<div fxLayout="row" style="background-color: white">
<div fxLayout="column" fxFlex="10">
<mat-form-field appearance="fill">
<mat-label>Date</mat-label>
<input
matInput
#pick
[matDatepicker]="picker"
(dateInput)="OnDateChange(pick)"
[min]="todayDate"
[max]="maxDate"
readonly
/>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker touchUi #picker [startAt]="todayDate"></mat-datepicker>
</mat-form-field>
</div>
<div fxLayout="column" fxFlex="15"></div>
<div fxLayout="column" fxFlex="30">
<mat-form-field appearance="fill">
<mat-label>Name</mat-label>
<input matInput formControlName="firstName" />
</mat-form-field>
</div>
<div fxLayout="column" fxFlex="15"></div>
<div fxLayout="column" fxFlex="30">
<mat-form-field appearance="fill">
<mat-label>Phone Number</mat-label>
<input matInput formControlName="phone" />
</mat-form-field>
</div>
<div></div>
</div>
<div fxLayout="row">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- hour Column -->
<ng-container matColumnDef="hour">
<th mat-header-cell *matHeaderCellDef>hour(90 min)</th>
<td mat-cell *matCellDef="let element">{{ element.hour }}</td>
</ng-container>
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef>No.</th>
<td mat-cell *matCellDef="let element">{{ element.position }}</td>
</ng-container>
<!-- Checkbox Column -->
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let row">
<mat-checkbox
(click)="$event.stopPropagation()"
*ngIf="row.statu == 'Open'"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
>
</mat-checkbox>
</td>
</ng-container>
<!-- statu Column -->
<ng-container matColumnDef="statu">
<th mat-header-cell *matHeaderCellDef>statu</th>
<td mat-cell *matCellDef="let element">{{ element.statu }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr
mat-row
*matRowDef="let row; columns: displayedColumns"
(click)="selection.toggle(row)"
></tr>
</table>
</div>
<div>
<button mat-raised-button class="my-class" type="submit" color="accent">
Send
</button>
</div>
</form>
calander page css:
table {
width: 100%;
}
.example-form .mat-form-field + .mat-form-field {
margin-left: 8px;
}
.my-class{
margin-top: 10px;
width: 100%!important;
}
.mat-form-field-empty.mat-form-field-label {
color: green;
}
.mat-form-field-underline {
background-color: green;
}
What exactly should take up the whole screen? If you want the three input fields to stretch to the far right, you can change
<div fxLayout="row" style="background-color: white">
to
<div fxLayout="row" id="row" style="background-color: white; display: flex">
I think that could help you https://tburleson-layouts-demos.firebaseapp.com/#/docs
They said : "Using 'fxFill' to fill available width and height of parent container"
So ... you must have the size of the parent at 100%.
I'm new in ionic angular, so I have a table where I use a select as:
<ion-row>
<ion-col size="3">
<mat-form-field appearance="fill">
<mat-label>Per page</mat-label>
<select matNativeControl [(ngModel)]="perPage" (ngModelChange)="setPerPage($event)" name="perPage">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</mat-form-field>
</ion-col>
</ion-row>
So it shows something like:
As you can see it has an arrow down. I want this same arrow on input, my current input:
<ion-col size="4" class="ion-text-left">
<p class="filter__title">Company</p>
<mat-form-field class="mat-form-control form_control-adjust">
<input #clientInput (keyup)="(0)" [matAutocomplete]="auto" [formControl]="company" matInput [(ngModel)]="selectedCompany"/>
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)='loadContacts($event.option.value)'>
<mat-option (onSelectionChange)="(clientInput.value != undefined)" *ngFor="let client of clientsFiltered | async" [value]="client">
<table class="autocomplete-table">
<tr>
<td class="text-crol" style="width: 20px">
{{ client.name }}
</td>
</tr>
</table>
</mat-option>
</mat-autocomplete>
</mat-form-field>
</ion-col>
Is it possible to change the input for select in order to show arrow-down?
As Chiranjaya Denuwan comment bellow I changed it to:
<ion-col size="4" class="ion-text-left">
<p class="filter__title">Company</p>
<mat-form-field class="mat-form-control form_control-adjust">
<mat-select class="custom-dropdown">
<mat-option (onSelectionChange)="(clientInput.value != undefined)" *ngFor="let client of clientsFiltered | async" [value]="client">
<table class="autocomplete-table">
<tr>
<td class="text-crol" style="width: 20px">
{{ client.name }}
</td>
</tr>
</table>
</mat-option>
</mat-select>
</mat-form-field>
It is showing as I want, problem is not changing table on selection change, I think is because I missing <mat-autocomplete> that I have on my original input, but when I try to add, it just does not load any option in select
Here you can use Angular material select.
input a class attribute into the mat-select
<mat-form-field appearance="fill">
<mat-label>Favorite food</mat-label>
<mat-select class="custom-dropdown">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
then CSS ,
.custom-dropdown ::ng-deep.mat-select-arrow-wrapper {
visibility: hidden;
}
Ive used a mat-card,inside that ive used mat-card-title and a form with 4 to 5 controls,mat-card layout is not visible on deployment in the browser,but mat-card title is displaying,Ive posted the form content and controls inside the mat-card-content only
Here is the template code,
<mat-card id="card" style="text-align: center;">
<mat-card-title>Details</mat-card-title>
<mat-card-content>
<form [formGroup] = "activityPlannerService.form" class="normal-form" (submit) = "onSubmit()">
<mat-grid-list cols="2" rowHeight="400px">
<mat-grid-tile>
<div class="controlers-container">
<input type="hidden" formControlName="$key">
<mat-form-field>
<mat-select formControlName="releaseName" placeholder="Release Name *">
<mat-option>None</mat-option>
<ng-container *ngFor="let release of releaseArray">
<mat-option value = "{{release.label}}">{{release.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="sprintName" placeholder="Sprint Name *" multiple>
<mat-option>None</mat-option>
<ng-container *ngFor="let sprint of sprintArray">
<mat-option value = "{{sprint.label}}">{{sprint.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="userName" placeholder="User Name *" multiple>
<mat-option>None</mat-option>
<ng-container *ngFor="let user of userArray">
<mat-option value = "{{user.label}}">{{user.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="activity" placeholder="Activities *" multiple>
<mat-option>None</mat-option>
<ng-container *ngFor="let activity of activitiesArray">
<mat-option value = "{{activity.label}}">{{activity.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<input formControlName="plannedEffort" matInput placeholder="Planned Efforts">
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<div class="button-row">
<button mat-raised-button color="primary" type="submit" [disabled]="activityPlannerService.form.invalid">Submit</button>
<button mat-raised-button color="warn" (click) = "onClear()">Clear</button>
</div>
</div>
</mat-grid-tile>
</mat-grid-list>
</form>
</mat-card-content>
</mat-card>
Here is the image of the browser output window,
I know i just made a minor mistake,im a new learner,please correct me,Thanks in advance:-)
Please try using the following line of code .
<mat-card>
<mat-card-header>
<mat-card-title>Details</mat-card-title>
</mat-card-header>
<form [formGroup]="activityPlannerService.form" class="normal-form" (submit)="onSubmit()">
<mat-card-content>
<mat-grid-list cols="2" rowHeight="400px">
<mat-grid-tile>
<div class="controlers-container">
<input type="hidden" formControlName="$key">
<mat-form-field>
<mat-select formControlName="releaseName" placeholder="Release Name *">
<mat-option>None</mat-option>
<ng-container *ngFor="let release of releaseArray">
<mat-option value="{{release.label}}">{{release.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="sprintName" placeholder="Sprint Name *" multiple>
<mat-option>None</mat-option>
<ng-container *ngFor="let sprint of sprintArray">
<mat-option value="{{sprint.label}}">{{sprint.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="userName" placeholder="User Name *" multiple>
<mat-option>None</mat-option>
<ng-container *ngFor="let user of userArray">
<mat-option value="{{user.label}}">{{user.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="activity" placeholder="Activities *" multiple>
<mat-option>None</mat-option>
<ng-container *ngFor="let activity of activitiesArray">
<mat-option value="{{activity.label}}">{{activity.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<input formControlName="plannedEffort" matInput placeholder="Planned Efforts">
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
</div>
</mat-grid-tile>
</mat-grid-list>
</mat-card-content>
<mat-card-actions>
<div class="button-row">
<button mat-raised-button color="primary" type="submit" [disabled]="activityPlannerService.form.invalid">Submit</button>
<button mat-raised-button color="warn" (click)="onClear()">Clear</button>
</div>
</mat-card-actions>
</form>
</mat-card>
What i am trying to do here is display input boxes for each of the people using ngFor. However this only lets me make selection from the first input box and when i make the selection it automatically updates the remaining inputs with the same value. Can anyone help me understand what i could be doing wrong here and i would like to be able to update the values for each person from the people array individually
<table>
<tr>
<td class="detailS">Hours</td>
<td style="width: auto" nowrap class="opt">
<mat-list>
<mat-list-item class="item"
*ngFor="let member of people.value; let i = index">
<div style="margin-left: 50px" nowrap>Start</div>
<div style="margin-left: 30px" *ngIf="edit">
<mat-form-field>
<input matInput [matAutocomplete]="startAuto"
formControlName="start" (click)="onChooseStart()"
required="true">
<mat-autocomplete #startAuto="matAutocomplete"
(optionSelected)="onStartSelected($event)">
<mat-option *ngFor="let time of filteredStart | async"
[value]="time">
{{time | amDateFormat:'h:mm a'}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<div style="margin-left: 50px" *ngIf="!edit">
{{start?.value}}
</div>
<div style="margin-left: 50px" nowrap>End</div>
<div style="margin-left: 30px" *ngIf="edit">
<mat-form-field>
<input style="width: 70px" #endInput matInput
[matAutocomplete]="endAuto" (click)="onChooseEnd()"
formControlName="end" required="true">
<mat-autocomplete #endAuto="matAutocomplete"
(optionSelected)="onEndSelected($event)">
<mat-option *ngFor="let time of filteredEnd | async"
[value]="time">
{{time | amDateFormat:'h:mm a'}}{{getDifference(formGroup.get('start').value, time)}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<div style="margin-left: 50px" *ngIf="!edit">
{{end?.value}}
</div>
</mat-list-item>
</mat-list>
</tr>
</table>