<form [formGroup]="assetformGroup" (ngSubmit)="onSubmit('update')" #formone="ngForm">
<mat-horizontal-stepper labelPosition="bottom" [linear]="true" #stepper formArrayName="formArray">
<mat-step formGroupName="0" [stepControl]="formArray.get([0])">
<ng-template matStepLabel>Asset</ng-template>
<mat-card class="card-min-height">
<div class="mat-custom-container">
<table cellspacing="0" class="full-width padding-right">
<tr>
<td>
<mat-form-field class="example-full-width">
<input [(ngModel)]="assetName" matInput formControlName="name" autocomplete="off"
placeholder=" Asset Name" maxlength="255" required>
<mat-error>Asset Name is required</mat-error>
</mat-form-field>
</td>
<td>
<mat-form-field class="example-full-width under-line">
<mat-chip-list #alterNativeNameList>
<mat-chip *ngFor="let term of alterNativeName" [selectable]="selectable"
[removable]="removable" (removed)="remove(term, alterNativeName)">
{{term}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input name="alterNativeName" placeholder="Alternative Names"
[matChipInputFor]="alterNativeNameList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)">
</mat-chip-list>
</mat-form-field>
</td>
</tr>
<tr>
<td>
<mat-form-field class="example-full-width">
<mat-chip-list #searchTermChipList>
<mat-chip *ngFor="let term of searchTerm" [selectable]="selectable"
[removable]="removable" (removed)="remove(term, searchTerm)">
{{term}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input name="searchTerm"
[matChipInputFor]="searchTermChipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)"
placeholder="Search Terms (Enter keywords associated with asset)">
</mat-chip-list>
</mat-form-field>
</td>
<td>
<mat-form-field class="example-full-width">
<input [(ngModel)]="cecoLength" matInput formControlName="cecoLength" type="number"
autocomplete="off" maxlength="11" placeholder="Ceco Length (Time in sec)" value="15">
</mat-form-field>
</td>
</tr>
<tr>
<td>
<mat-form-field class="example-full-width">
<input [(ngModel)]="metaDataKey" matInput formControlName="metaDataKey"
autocomplete="off"
placeholder="Meta Data Key">
</mat-form-field>
</td>
<td>
<mat-form-field class="example-full-width">
<mat-chip-list #metaDataChipList>
<mat-chip *ngFor="let term of metaData" [selectable]="selectable"
[removable]="removable" (removed)="remove(term, metaData)">
{{term}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input name="metaData" placeholder="Meta Data"
[matChipInputFor]="metaDataChipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)">
</mat-chip-list>
</mat-form-field>
</td>
</tr>
<tr>
<td>
<mat-form-field class="example-full-width">
<input [(ngModel)]="bucketURL" placeholder="Bucket URL"
maxlength="1000" matInput formControlName="bucketURL"
value="s3://armada-data-eu-west-2/prod">
</mat-form-field>
</td>
<td>
<mat-form-field class="example-full-width">
<input [(ngModel)]="language" placeholder="Language"
maxlength="2" matInput formControlName="language">
</mat-form-field>
</td>
</tr>
</table>
<div>
<button mat-button matStepperNext type="button">Next</button>
</div>
</div>
</mat-card>
</mat-step>
<mat-step formGroupName="1" [stepControl]="formArray?.get([1])">
<ng-template matStepLabel>Collection</ng-template>
<mat-card class="card-min-height">
<div class="mat-custom-container">
<mat-grid-list cols="2" rowHeight="4:1" rowHeight="100px">
<mat-grid-tile [colspan]="1"
[rowspan]="1">
<div class="select-full-width">
<app-dynamic-select table_name="collectionGroup"
placeholder="Select Collection Group *"
[selectedValue]="collectionGroupValue"
(messageEvent)="receiveMessageFromColGrp($event)"
(collectionGroupValueEvent)="collectionGroupValueEventFun($event)"
>
</app-dynamic-select>
</div>
</mat-grid-tile>
<mat-grid-tile [colspan]="1"
[rowspan]="1">
<div class="select-full-width">
<app-dynamic-select table_name="collections"
placeholder="Select Collection *" [selectedValue]="collectionValue"
(messageEvent)="receiveMessageFromCollection($event)">
</app-dynamic-select>
</div>
</mat-grid-tile>
<mat-grid-tile [colspan]="1"
[rowspan]="1">
<div class="pull-left select-full-width">
<button mat-button matStepperPrevious type="button">Back</button>
<button type="button" mat-button matStepperNext>Next</button>
</div>
</mat-grid-tile>
</mat-grid-list>
</div>
</mat-card>
</mat-step>
<mat-step formGroupName="2" [stepControl]="formArray?.get([2])">
<ng-template matStepLabel>Rights holder</ng-template>
<mat-card class="card-min-height">
<div class="mat-custom-container">
<mat-grid-list cols="2" rowHeight="4:1" rowHeight="100px">
<mat-grid-tile [colspan]="1"
[rowspan]="1">
<div class="select-full-width">
<app-dynamic-select table_name="rightsholderGroup"
placeholder="Select Rightsholder Group *"
[selectedValue]="rightsholderGroupValue"
(messageEvent)="openPopupRightsholderGroup($event)">
</app-dynamic-select>
</div>
</mat-grid-tile>
<mat-grid-tile [colspan]="1"
[rowspan]="1">
<div class="select-full-width">
<app-dynamic-multi-select table_name="rightsholders"
placeholder="Select Rightsholder *"
[selectedItem]="rightsholderValue"
(popupEventRightsholderGroup)="openPopupRightsholderGroup($event)"
(messageEvent)="openPopupRightsholder($event)"
(rightsholderGroupValueEvent)="rightsholderGroupValueEventFun($event)"
>
</app-dynamic-multi-select>
</div>
</mat-grid-tile>
<mat-grid-tile>
<div class="pull-left select-full-width">
<div>
<button mat-button matStepperPrevious type="button">Back</button>
<button mat-button matStepperNext type="button">Next</button>
</div>
</div>
</mat-grid-tile>
</mat-grid-list>
</div>
</mat-card>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
<mat-card class="card-min-height">
<div class="mat-custom-container">
<div>
<div>
{{"Please review and submit."}}
</div>
<mat-grid-tile>
<b>Asset Name :-</b> {{assetName}}
</mat-grid-tile>
<mat-grid-tile>
<b>Alternative Names :-</b>
<mat-chip-list *ngFor="let item of alterNativeName ; let i=index">
<mat-chip>{{item }}</mat-chip>
</mat-chip-list>
</mat-grid-tile>
<mat-grid-tile>
<b>Search Terms :-</b>
<mat-chip-list *ngFor="let item of searchTerm ; let i=index">
<mat-chip>{{item }}</mat-chip>
</mat-chip-list>
</mat-grid-tile>
<mat-grid-tile>
<b>Ceco Length :-</b> {{" "+cecoLength}}
</mat-grid-tile>
<mat-grid-tile>
<b>Search Terms will be store in database like :-</b>
<pre>{{searchTerm | json}}</pre>
</mat-grid-tile>
<mat-grid-tile></mat-grid-tile>
<mat-grid-tile>
<b>Meta Data Key:-</b>{{" "+metaDataKey}}
</mat-grid-tile>
<mat-grid-tile>
<b>Meta Data Values:-</b>
<mat-chip-list *ngFor="let item of metaData ; let i=index">
<mat-chip>{{item }}</mat-chip>
</mat-chip-list>
</mat-grid-tile>
<!--<mat-grid-tile>
<b>Media Info :-</b>
<mat-chip-list *ngFor="let item of mediaInfo ; let i=index">
<mat-chip>{{item }}</mat-chip>
</mat-chip-list>
</mat-grid-tile>-->
<mat-grid-tile>
<b>Bucket URL :-</b> {{bucketURL}}
</mat-grid-tile>
<mat-grid-tile>
<b>Language :-</b> {{language}}
</mat-grid-tile>
<mat-grid-tile>
<b>Collection Group :-</b> {{collectionGroupValue && collectionGroupValue.Name}}
</mat-grid-tile>
<mat-grid-tile>
<b>Collection :-</b> {{collectionValue && collectionValue.Name}}
</mat-grid-tile>
<mat-grid-tile>
<b>Rightsholder Group :-</b> {{rightsholderGroupValue && rightsholderGroupValue.Name}}
</mat-grid-tile>
<mat-grid-tile>
<b>Rightsholder :-</b>
<mat-chip-list *ngFor="let item of rightsholderValue ; let i=index">
<mat-chip>{{item.Name }}</mat-chip>
</mat-chip-list>
</mat-grid-tile>
</mat-grid-list>
</div>
<div>
<button mat-button matStepperPrevious>Back</button>
<!-- <button mat-button (click)="stepper.reset()">Reset</button>-->
<button type="submit" mat-button>submit</button>
</div>
</div>
</mat-card>
</mat-step>
</mat-horizontal-stepper>
</form>
答案 0 :(得分：0)
访问.ts文件中的表单，就像我在以下示例中所做的那样。
this.firstFormGroup = this._formBuilder.group({
// creates the internal firstName FormControl
firstName: ['', Validators.required],
// creates the internal lastName FormControl
lastName: ['', Validators.required],
});