Question

我将Fromts从.ts文件“绑定”到我的.html文件时遇到问题。我尝试研究其他stackoverflow问题和可能的答案，并在我的应用程序上尝试了它们，但仍然遇到多个错误。

你们可以看到我开始调用[formGroup]并将其设置为ChartsForm。

然后我通过使用formArrayName和formControlName来指定控件，从而告知部门“类”它属于数组组。

所以，我的问题是：HTML如何找不到控件？我已经将formArrayName声明为department数组，并且formControlName = departmentName，大家可以在.ts文件中看到。我在哪里可能搞砸了？

chart.component.html：

<form [formGroup]="chartsForm" (ngSubmit)="onSubmit()">


            <div class="form-group row">
                <label for="hospital" class="col-sm-2 col-form-label">Hospital:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="hospital" placeholder="Hospital name"
                        formControlName="hospitalName" required>

                </div>
            </div>

            <div class="form-group row" formArrayName="department">
                <label for="department" class="col-sm-2 col-form-label">Department:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="department" placeholder="Department"
                        formGroupName="departmentName">

                </div>
            </div>


            <div class="form-group row" FormArrayName="ward">
                <label for="ward" class="col-sm-2 col-form-label">Ward:</label>
                <div class="col-sm-10" formArrayName="ward">
                    <input type="text" class="form-control" id="ward" placeholder="Ward" formControlName="wardName">
                </div>
            </div>


            <button type="submit" [disabled]="!chartsForm.valid">Submit</button>



            <p>
                Form Status: {{ chartsForm.value | json }}
            </p>

            <p>
                Form Valid: {{ chartsForm.status }}
            </p>





        </form>

chart.component.ts：

export class ChartComponent implements OnInit {

    chartsForm: FormGroup

    constructor(private _chartService: ChartService, private fb: FormBuilder, private cookieService: CookieService) {}


    ngOnInit(): void {

    this.chartsForm = this.fb.group({
                hospitalName: ['', Validators.required],
                department: this.fb.array([this.korrektJsonOpsætning()]),
     })


        // console.log(JSON.parse(this.cookieService.get('test')));
    }

    korrektJsonOpsætning(): FormGroup {
        return this.fb.group({
            departmentName: ['Intensiv afd.'],
            ward: this.fb.array([{
                wardName: ['ward1'],



           }])

        })
    }

    onSubmit() {

        console.log(this.chartsForm.value); 

        // this.cookieService.set('test', JSON.stringify(this.chartsForm.value));
    }

}

错误：找不到路径为“部门->部门名称”的控件

0 个答案: