TS文件
import {Component} from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
/**
* @title Basic use of `<table mat-table>`
*/
@Component({
selector: 'table-basic-example',
styleUrls: ['table-basic-example.css'],
templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
// created offer list table
offersColumns = ['SELECT', 'NAME', 'CODE', 'ISACTIVE'];
offersColumnRowData = [];
// condition for create new template
isDataScreen = true;
// drop down for selected offer
offerName = '';
// form validation for user input for Offer Library
control = new FormControl('', [Validators.required, Validators.minLength(4)]);
// level One to level Five Static Data Create new Offer template
constructor( ) {
this.getErrorMsg();
}
// method for form validation Offer Library
getErrorMsg() {
return this.control.hasError('required') ? 'You must enter a Name here' :
this.control.hasError('minlength') ? 'You must enter atleast four characters' :
'';
}
// button click even for new new button Offer Library
createNewData() {
this.isDataScreen = false;
};
backtoDataCreation() {
this.isDataScreen = true;
};
}
HTML文件
<div class="main-content">
<div class="card">
<div class="card-header">
<h5 class="title">Data</h5>
</div>
<div class="window-pad no-overflow">
<mat-tab-group>
<mat-tab label="Data" class="no-overflow">
<div *ngIf="isDataScreen ; else NewData">
<!-- Code for button tab -->
<div class="-toolbar">
<p>
<mat-toolbar>
<h4>New Data</h4>
<div class="row align-right col-md-offset-9">
<button (click)="createExpression()" disabled mat-raised-button>
inActive
</button>
<button color="primary" disabled mat-raised-button>
Delete
</button>
<button mat-raised-button (click)="createNewData()" type="button">
Create New
</button>
</div>
</mat-toolbar>
</p>
</div>
<mat-table [dataSource]="offersColumnRowData" class="mat-table no-overflow">
<ng-container matColumnDef="SELECT">
<mat-header-cell *matHeaderCellDef> SELECT </mat-header-cell>
<mat-cell *matCellDef="let element"> </mat-cell>
</ng-container>
<ng-container matColumnDef="NAME">
<mat-header-cell *matHeaderCellDef> NAME </mat-header-cell>
<mat-cell *matCellDef="let element"> </mat-cell>
</ng-container>
<ng-container matColumnDef="CODE">
<mat-header-cell *matHeaderCellDef> CODE </mat-header-cell>
<mat-cell *matCellDef="let element"> </mat-cell>
</ng-container>
<ng-container matColumnDef="DESCRIPTION">
<mat-header-cell *matHeaderCellDef> DESCRIPTION </mat-header-cell>
<mat-cell *matCellDef="let element"> </mat-cell>
</ng-container>
<ng-container matColumnDef="LEVEL 1">
<mat-header-cell *matHeaderCellDef> LEVEL 1 </mat-header-cell>
<mat-cell *matCellDef="let element"> </mat-cell>
</ng-container>
<ng-container matColumnDef="CREATEDATE">
<mat-header-cell *matHeaderCellDef> CREATEDATE </mat-header-cell>
<mat-cell *matCellDef="let element"> </mat-cell>
</ng-container>
<ng-container matColumnDef="ISACTIVE">
<mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
<mat-cell *matCellDef="let element"> </mat-cell>
</ng-container>
<ng-container matColumnDef="UNAME">
<mat-header-cell *matHeaderCellDef> UNAME </mat-header-cell>
<mat-cell *matCellDef="let element"> </mat-cell>
</ng-container>
<ng-container matColumnDef="Active">
<mat-header-cell *matHeaderCellDef> Active </mat-header-cell>
<mat-cell *matCellDef="let element"> </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="offersColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: offersColumns;"></mat-row>
</mat-table>
</div>
<ng-template #NewData>
<div class="window-pad-height no-overflow">
<h4>New Offers</h4>
<div class="row no-overflow">
<div class="col-md-1 window-pad-height no-overflow">
<!-- Write Offer Name here -->
<mat-label> Name: </mat-label>
</div>
<div class="col-md-2 no-overflow">
<mat-form-field>
<input matInput placeholder="Name" [(ngModel)]="offerName" value="" [formControl]="control"
required>
<mat-error *ngIf="control.invalid">{{getErrorMsg()}}</mat-error>
</mat-form-field>
</div>
</div>
<!-- Write offer Code Here -->
<div class="row no-overflow">
<div class="col-md-1 window-pad-height no-overflow">
<mat-label> Code: </mat-label>
</div>
<div class="col-md-2 no-overflow">
<mat-form-field>
<input matInput placeholder="Code" value="">
</mat-form-field>
</div>
</div>
<!-- Write Offer Decription here -->
<div class="row no-overflow">
<div class="col-md-1 window-pad-height no-overflow">
<mat-label> Description: </mat-label>
</div>
</div>
<!-- Select check box isActive -->
<div class="row no-overflow window-pad-height">
<div class="col-md-1 no-overflow ">
<mat-checkbox>IsActive</mat-checkbox>
</div>
</div>
<div class="window-pad-height">
<div class="row col-md-3 no-overflow">
<!-- back button for Offer Creation -->
<button mat-flat-button color="primary" (click)="backtoDataCreation()">Back</button>
</div>
<!-- Save Button for New Created Offer -->
<div class="col-md-1 no-overflow">
<button mat-flat-button color="primary">Save</button>
</div>
</div>
</div>
</ng-template>
</mat-tab>
<!-- Offer Mapping Code Starts Here -->
<mat-tab label="Data 2">
Not Yet Implemented !!
</mat-tab>
</mat-tab-group>
</div>
</div>
</div>
解释->有两个屏幕,我想将复选框值存储为ISACTIVE的MAT TABLE中的yes或no! 当我选择复选框并在垫子表项中单击保存按钮后,应输入YES。当我取消选中复选框并在垫子表项中单击保存按钮后,应输入为。 stackblitz在这里链接-> https://stackblitz.com/edit/angular-gbf9kz-uqyihm?file=app%2Ftable-basic-example.html
答案 0 :(得分:0)
因此,在这里,我为您添加了一个表格,一旦正确填写即可注册。
newOffersForm: FormGroup; //Formulaire
@ViewChild('formDirective') formDirective: FormGroupDirective; //Erreur formulaire
ngOnInit() {
this.newOffersForm = new FormGroup({
name: new FormControl('', [Validators.required, Validators.minLength(4)]),
code: new FormControl('', [Validators.required]),
isActive: new FormControl(false)
});
}
表单的所有输入都会创建一个“ dataObject”对象,该对象将被推送到表的数据列表中。
dataObject: data;
offersColumnRowData: data[] = [];
export interface data {
name: string;
code: string;
isActive: boolean;
}
在表单中,“ isActive”的值默认为FALSE,如果选中此复选框,则为TRUE。 这是表中处理“是/否”的显示。
<ng-container matColumnDef="ISACTIVE">
<mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
<mat-cell *matCellDef="let element">{{element.isActive? 'YES':'NO'}}</mat-cell>
</ng-container>
演示: