Текущий сценарий
- Компонент angular (angular 8) с текстовым полем и текстовой областью.
- Компонент, построенный с использованием команда "" build ":" ng build --prod --output-hashing = none "" (в пакете. json)
- Затем файл вывода min копируется в другую внешнюю папку, содержащую HTML файл.
- Компонент отображается с использованием сгенерированного тега компонента.
Выпуск
Angular компонент не отображается на странице HTML, когда для связывания значения текстового поля используется форма formControlName (в проекте 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' }
];
}
}