Javascript 角度8组件未渲染

当前情景

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

问题

• 当“formControlName”用于绑定文本框的值时（在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' }
        ];
    }
}

选择请求类型
{{请求[i].name}
此字段不能为空。
此字段不能为空。
提交
无效的凭据。
****
导出类GeneralRequestComponent实现OnInit{
generalRequestForm:FormGroup；
invalidLogin:boolean=false；
无效项：布尔值=假；
submitSuccess:boolean=false；
invalidComments:boolean=false；
请求；
建造师(
私有formBuilder:formBuilder，
专用路由器：路由器，
私人apiService:apiService
) {
this.generalRequestForm=新表单组({
项目：新FormControl（“”，需要验证器），
注释：新FormControl（“”，需要验证程序），
请求：新FormControl（“”，需要验证器），
})
of（this.getRequestType（））。订阅（请求=>{
this.requests=请求；
this.generalRequestForm.controls.requests.patchValue（this.requests[0].id）；
});
}
onSubmit（）{
console.log（“项…”，this.generalRequestForm）
如果（！this.generalRequestForm.controls.item.value）{
this.invalidItem=true；
返回；
}
如果（！this.generalRequestForm.controls.comments.value）{
this.invalidComments=true；
返回；
}
否则{
警报（“您的响应已被记录。管理员会在时间之前到达您的。”）
返回；
}
if（this.generalRequestForm.invalid）{
返回；
}
常量loginPayload={
项：this.generalRequestForm.controls.item.value，
注释：this.generalRequestForm.controls.comments.value
};
this.apiService.login（loginPayload）.subscribe（数据=>{
如果（data.status==200）{
window.localStorage.setItem（'token'，data.token）；
this.router.navigate（['home']）；
}否则{
this.invalidLogin=true；
警报（数据、消息）；
}
});
}
恩戈尼尼特（）{
//window.localStorage.removietem（'token'）；
//this.generalRequestForm=this.formBuilder.group({
//项目：[''，Validators.compose（[Validators.required]），
//注释：[''，验证器。必需]，
//请求：[''，验证器。必需]
// });
}
getRequestType（）{
返回[
{id:'1'，name:'Parking Slot'}，
{id:'2'，name:'餐卡'}，
{id:'3'，name:'Infopark贴纸'}，
{id:'4'，name:'Address-Proof'}，
{id:'5'，name:'Form 16'}，
{id:'6'，name:'Time Entry'}，
{id:'7'，name:'Other Request'}
];
}
}

您可能需要在typescript文件（.ts）中定义表单对象，然后将其绑定到html表单。这被称为“反应形式”，您可以从angular查看有关此主题的文档：

---

（它还包含一个示例，以进一步了解情况）

请显示一些代码您正在查找角度元素。请参阅。@Riscie我已在问题中添加了代码。谢谢。表单对象已经存在于我的代码片段中。表单在同一应用程序中运行时已正确绑定。但问题是当我将该组件构建为自定义web组件并从另一个项目中使用时。