Angular 8 組件未呈現

Question

當前場景

• 帶有文本框和文本區域的角度組件（角度 8）。
• 使用命令 ""build": "ng build --prod --output-hashing=none"" 構建的組件（在 package.json 中）
• 然后將輸出最小文件復制到另一個包含 HTML 文件的外部文件夾。
• 使用生成的組件標簽顯示組件。

問題

• 當“formControlName”用於綁定文本框的值時，Angular 組件不會在 HTML 頁面中呈現（在 angular 項目中）。

• 如何使用“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

您可能希望在打字稿文件 (.ts) 中定義一個 Form 對象，然后將其綁定到 html 表單。 這稱為“反應形式”，您可以從 angular 查看有關此主題的文檔：

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

（它還包含一個跟進和獲得更多知識的例子）