形状阵列多反应形式角形，角形材料2

Question

                           `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按钮应该被禁用。 现在我使用了内联样式，我将删除它们。