`this.microserviceForm =
this._formBuilder.group({
addresses: this._formBuilder.array([])
})
SelectedOptions() {
console.log("Final Array", this.selectedValues);
let selectedEnv = this.selectedValues;
if(selectedEnv.length > 0 && selectedEnv !=
null){
selectedEnv.forEach(element => {
this.addAddress();
});
}
this.nextEnabled = true;
this.nextEnabledData = true;
}
initAddress() {
return this._formBuilder.group({
name: ['', [Validators.required]],
envType:['',[Validators.required]],
});
}
addAddress() {
const control =
<FormArray>this.microserviceForm.
controls['addresses'];
const addrCtrl = this.initAddress();
control.push(addrCtrl);
}
` <form [formGroup]="microserviceForm"
(ngSubmit)="submitForm()">
<div class="flex-item mt20" style=" display:
inline-flex ; flex-flow: row wrap; position:
absolute;" [hidden]="ftUser">
<div formArrayName="addresses">
<div [hidden]="ftUser" class="relative flex-row
mb20" *ngFor="let item of
microserviceForm.controls.addresses.controls ;
let i = index" style=" padding: 10px;
margin:15px; position: relative; width:
300px;height: 161px;border-radius: 2px;border:
1px solid rgba(51, 153, 102, 0.5);background-
color: #ffffff;">
<img src="{{item.img}}" class="aws-icon" />
{{item.text}}
<!--<md-icon class="material-icons"
(click)="removeSelection(i)"
style="float:right;padding-
right:10px">close</md-icon>-->
<div class="flex-container" fxLayout="row">
<div class="flex-item mt20" fxFlex="30%">
<div class="form-group relative flex-row mb20">
<label> Name: </label>
</div>
</div>
<div class="flex-row">
<md-input type="text" class="form-control flex-
row " #arrayName
(keyup)="arrayFillName(arrayName.value)"
formControlName="name"
>
</md-input>
</div>
</div>
<div class="flex-container" fxLayout="row">
<div class="form-group flex-item mt20" fxFlex="28%">
<label> Enviroment: </label>
</div>
<div class="flex-row">
<div class="flex-item mt20"
style="width:185px">
<div class="project-input mb20">
<md-select placeholder="Choose/Create"
class=" flex-row"
formControlName="envType">
<md-option *ngFor="let env of
enviroment" [value]="env.value" #arrayEnv
(click)="arrayFillEnv(arrayEnv.value)">
{{ env.viewValue }}
</md-option>
</md-select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-btn" *ngIf="nextEnabled"
[hidden]="ftUser">
<button md-raised-button class="auto-btn-
prime" (click)="previousView() "
style="background: grey ; color :
white">BACK</button>
<button md-raised-button class="form-group
auto-btn-prime"
[disabled]="!microserviceForm.valid"
type="submit">LAUNCH</button>
</div>
</form>
我正在使用 formarray，因为我必须根据“selectedValues”值显示多个表单，这将是一个数组，具体取决于先前选择的任务的值，所以假设我将“selectedValue”设置为 2，然后显示 2 个反应式表单，直到两个表单已填充 LAUNCH 按钮应禁用。现在我使用了内联样式，我将删除它们。