获取和更新信息属于formArrayName

时间：2018-11-26 15:03:54

标签： javascript html angular typescript angular5

我有一个表单，您可以在其中输入公司，并且可以在表单中添加属于该公司的人员。

加法部分工作正常。问题是，当我必须更新和/或撤消该公司的某些人员时。

来自Mongo Db的数据

Full Image Full Image

前端结果

Full Image Full Image

问题

我想带回(persons array)人名单并能够对其进行编辑。

我的代码

HTML 

<form [formGroup]="clientForm" (ngSubmit)="onUpdateClient(clientForm)">
    <div class="col-6 float-left-css">
      <!-- code omitted for brevity -->
    </div>

    <div class="col-6 float-left-css">
     <div class="card">
        <div class="card-header">
            <button class="btn btn-block btn-sm btn-warning" (click)="AddNewGirlGuy()" type="button">Add New Guy/Girl</button>
        </div>


        <div class="card-body">

            <div formArrayName="persons">

                <div *ngIf="clientForm.controls.persons?.length > 0">
                     {{ clientForm.controls.persons?.length }}

                    <div *ngFor="let person of clientForm.controls.persons.controls; let i = index" class="something" >

                        <div [formGroupName]="i">

                            <div class="form-group">
                                <label>Person Name</label>
                                <input type="text" class="form-control form-control-sm" formControlName="person_name">
                            </div>

                            <div class="form-group">
                                <label>Person Email</label>
                                <input type="email" class="form-control form-control-sm" formControlName="person_email">
                            </div>

                            <div class="form-group">
                                <label>Person Designation</label>
                                <input type="text" class="form-control form-control-sm" formControlName="person_designation">
                            </div>

                            <button  type="button" *ngIf="clientForm.controls.persons?.length > 1" (click)="deletePerson(i)" class="btn btn-sm btn-danger"> Remove This </button>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

组件打字稿

export class ClientViewComponent implements OnInit {

    clientForm      : FormGroup;
    submitted       = false;
    pageTitle       = 'Edit a Client';
    clientID        = this.route.snapshot.params['id'];
    clientINFO      : any;
    clientPersonP   : any;


    constructor( private router: Router,private formBuild: FormBuilder,
                 private route: ActivatedRoute, private title: Title, private service : ClientsViewService) {}

    ngOnInit() {

        this.title.setTitle(this.pageTitle);

        this.clientForm = this.formBuild.group({
            persons                 : this.formBuild.array([ this.initItems() ]),

            client_name             : new FormControl('', [ Validators.required ] ),
            client_contact_number   : new FormControl('', [ Validators.required ] ),
            client_address          : new FormControl('', [ Validators.required ] ),
            client_pastel_code      : new FormControl('', [ Validators.required ] ),
            client_contact_person   : new FormControl('', [ Validators.required ] ),
            client_contact_email    : new FormControl('', [ Validators.required, Validators.email, ] ),
        });

        this.service.getSingleClient( this.clientID )
            .subscribe(
                data => {

                    this.clientINFO     = data.obj[0];
                    this.clientPersonP  = data.obj[0].persons;

                    this.clientForm = this.formBuild.group({

                        persons                 : this.formBuild.array([ this.initItems() ]),

                        client_name             : new FormControl( data.obj[0].client_name, [ Validators.required ] ),
                        client_contact_number   : new FormControl( data.obj[0].client_contact_number, [ Validators.required ] ),
                        client_address          : new FormControl( data.obj[0].client_address, [ Validators.required ] ),
                        client_pastel_code      : new FormControl( data.obj[0].client_pastel_code, [ Validators.required ] ),
                        client_contact_person   : new FormControl( data.obj[0].client_contact_person, [ Validators.required ] ),
                        client_contact_email    : new FormControl( data.obj[0].client_contact_email, [ Validators.required, Validators.email, ] ),

                    });
                },
                (err: HttpErrorResponse) => {
                    if (err.error instanceof Error) {
                        console.log('An error occurred:', err.error.message);
                    } else {
                        console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
                        console.log( JSON.stringify( err.error ) );
                        console.log( err.error );
                    }
                }
            )
    }


    initItems() {

        return this.formBuild.group({
            person_name         : ['', Validators.required],
            person_email        : ['', Validators.required],
            person_designation  : ['', Validators.required],
            person_contact_no   : ['', Validators.required]
        });
    }


    get f() { return this.clientForm.controls; }


    onUpdateClient (clientForm) {
        this.submitted = true;
        if (this.clientForm.invalid) {
            return;
        } else {
            this.service.updateSingleClient( this.clientForm.value, this.clientID )
                .subscribe(
                    data => {
                        if (data) {

                            swal({
                                type: 'success',
                                title: 'Good Job ...',
                                text: data.message,
                                showConfirmButton: false,
                                timer: 2000,
                            });

                            setTimeout( () =>  {
                                this.router.navigate( ['/clients'], {relativeTo: this.route} );
                            }, 2500);
                        }
                    },

                    (err: HttpErrorResponse) => {
                        if (err.error instanceof Error) {
                            console.log('An error occurred:', err.error.message);
                        } else {
                            console.log(`Backend returned code ${err.status}, body was: ${err.error.error}`);
                            console.log( err.error  );

                            swal({
                                title: err.error.title,
                                text: 'Something Went Wrong !',
                                type: 'error',
                                showConfirmButton: true,
                                timer: 3000,
                            });
                        }
                    }
                );
        }
    }


    deletePerson (index: number) {
        const control = <FormArray>this.clientForm.controls['persons'];
        control.removeAt(index);
    }


    AddNewGirlGuy () {
        const control = <FormArray>this.clientForm.controls['persons'];
        control.push(this.initItems());
    }


}

问题

我想带回预先填充值的人员列表(persons array)，并能够编辑这些值。

1 个答案:

答案 0 :(得分：0)

您正在订阅服务的getSingleClient()方法，然后设置FormControls的值。

除了您要使用persons用空值初始化this.formBuild.array([ this.initItems() ])数组外，因此启动时控件值是空的。

您可以再创建一种使用相关数据并在我们的FormArray中填充值的方法。像这样-

populatePersonsArray(persons: Array<any>) {
    let formArray = this.clientForm.controls.persons as FormArray;
    for(let i=0; i < persons.length ; i++) {
        formArray.push(
            this.formBuild.group({
                person_name         : [persons[i].person_name , Validators.required],
                person_email        : [persons[i].person_email, Validators.required],
                person_designation  : [persons[i].person_designation, Validators.required],
                person_contact_no   : [persons[i].person_contact_no , Validators.required]
            })
        )
    }
}

并像这样使用它-

this.service.getSingleClient( this.clientID )
    .subscribe(
    data => {
        this.clientINFO     = data.obj[0];
        this.clientPersonP  = data.obj[0].persons;

        this.clientForm = this.formBuild.group({
            persons                 : this.formBuild.array([]),

            client_name             : new FormControl( data.obj[0].client_name, [ Validators.required ] ),
            client_contact_number   : new FormControl( data.obj[0].client_contact_number, [ Validators.required ] ),
            client_address          : new FormControl( data.obj[0].client_address, [ Validators.required ] ),
            client_pastel_code      : new FormControl( data.obj[0].client_pastel_code, [ Validators.required ] ),
            client_contact_person   : new FormControl( data.obj[0].client_contact_person, [ Validators.required ] ),
            client_contact_email    : new FormControl( data.obj[0].client_contact_email, [ Validators.required, Validators.email, ] ),
        });

        this.populatePersonsArray(this.clientPersonP);
    },
    (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
            console.log('An error occurred:', err.error.message);
        } else {
            console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
            console.log( JSON.stringify( err.error ) );
            console.log( err.error );
        }
    }
)

看到我在构建表单时使用persons: this.formBuild.array([])用空值初始化FormArray，然后使用populatePersonsArray()方法重新分配值。

相关问题
最新问题