Angular 8 组件没有被渲染

Question

当前情景

• 带有文本框和文本区域的角度组件（角度 8）。
• 使用命令“build”构建的组件：“ng build --prod --output-hashing=none”（在 package.json 中）
• 然后将输出的 min 文件复制到另一个包含 HTML 文件的外部文件夹。
• 使用生成的组件标签显示组件。

问题

• 当“formControlName”用于绑定文本框的值时（在 Angular 项目中），Angular 组件未在 HTML 页面中呈现。

• 如何使用“formGroup”和“formControlName”实现表单，然后才能在外部 HTML 文件中使用该组件。

任何帮助将不胜感激。提前致谢。

<--------html code-->

        <div>
        <form [formGroup]="generalRequestForm" (ngSubmit)="onSubmit()">
            <div class="mb-15 form-group">
                <select class="custom-select" formControlName="requests" id="requests" ngDefaultControl>
                    <option value="">Select Request Type</option>
                    <option *ngFor="let request of requests; let i = index" [value]="requests[i].id">
                        {{requests[i].name}}
                    </option>
                </select>
            </div>
            <div class="mb-15 form-group">
                <input type="text" class="form-control" placeholder="Item" formControlName="item" ngDefaultControl
                    autocomplete="off" />
                <div *ngIf="invalidItem" class="error">This field cannot be empty.</div>

            </div>
            <div class="mb-15 form-group">
                <textarea class="form-control comments" placeholder="Comments" formControlName="comments"
                    ngDefaultControl autocomplete="off"></textarea>
                <div *ngIf="invalidComments" class="error">This field cannot be empty.</div>

            </div>
            <div class="row align-items-center remember"></div>
            <div class="form-group">
                <button class="btn float-right submit_btn">Submit</button>
                <div *ngIf="invalidLogin" class="error">Invalid credentials.</div>
            </div>
        </form>
    </div>


**<-------ts code------->**

export class GeneralRequestComponent implements OnInit {
    generalRequestForm: FormGroup;
    invalidLogin: boolean = false;
    invalidItem: boolean = false;
    submitSuccess: boolean = false;
    invalidComments: boolean = false;
    requests;
    constructor(
        private formBuilder: FormBuilder,
        private router: Router,
        private apiService: ApiService
    ) {

        this.generalRequestForm = new FormGroup({
            item: new FormControl('', Validators.required),
            comments: new FormControl('', Validators.required),
            requests: new FormControl('', Validators.required),
        })

        of(this.getRequestType()).subscribe(requests => {
            this.requests = requests;
            this.generalRequestForm.controls.requests.patchValue(this.requests[0].id);
        });
    }

    onSubmit() {

        console.log("item...", this.generalRequestForm)
        if (!this.generalRequestForm.controls.item.value) {
            this.invalidItem = true;
            return;
        }
        else if (!this.generalRequestForm.controls.comments.value) {
            this.invalidComments = true;
            return;
        }
        else {
            alert("Your response has been recorded. Administrator would reach you before the time.")
            return;
        }
        if (this.generalRequestForm.invalid) {
            return;
        }
        const loginPayload = {
            item: this.generalRequestForm.controls.item.value,
            comments: this.generalRequestForm.controls.comments.value

        };
        this.apiService.login(loginPayload).subscribe(data => {
            if (data.status === 200) {
                window.localStorage.setItem('token', data.token);
                this.router.navigate(['home']);
            } else {
                this.invalidLogin = true;
                alert(data.message);
            }
        });
    }

    ngOnInit() {
        // window.localStorage.removeItem('token');
        // this.generalRequestForm = this.formBuilder.group({
        //     item: ['', Validators.compose([Validators.required])],
        //     comments: ['', Validators.required],
        //     requests: ['', Validators.required]
        // });

    }

    getRequestType() {
        return [
            { id: '1', name: 'Parking Slot' },
            { id: '2', name: 'Meal Card' },
            { id: '3', name: 'Infopark Sticker' },
            { id: '4', name: 'Address Proof' },
            { id: '5', name: 'Form 16' },
            { id: '6', name: 'Time Entry' },
            { id: '7', name: 'Other Request' }
        ];
    }
}

Answer 1

您可能希望在 typescript 文件 (.ts) 中定义一个 Form 对象，然后将其绑定到 html 表单。这被称为“反应形式”，您可以从 Angular 中查看有关此主题的文档：

https://angular.io/guide/reactive-forms

（还包含一个例子，可以跟进和获取更多知识）