manage-tasks.component.html
<p>manage-tasks works!</p>
<form #taskForm="ngForm">
<input type="text" name="task_name" palceholder="Task Name" [(ngModel)]="task_service.selected_task.name">
<input type="text" name="description" palceholder="describe" [(ngModel)]="task_service.selected_task.description">
</form>
manage-tasks.component.ts
import { Component, OnInit } from '@angular/core';
import {NgForm} from '@angular/forms'
import {TaskService} from '../shared/task.service';
import {Task} from '../shared/task';
@Component({
selector: 'app-manage-tasks',
templateUrl: './manage-tasks.component.html',
styleUrls: ['./manage-tasks.component.css'],
providers:[TaskService]
})
export class ManageTasksComponent implements OnInit {
constructor(public task_service : TaskService) { }
ngOnInit(): void {
console.log(' in ngOnInit function ');
// Checking condition using setInterval
this.task_service.selected_task={
name : "",
description : ""
};
console.log(this.task_service.selected_task)
let timerId = setInterval(function(){
console.log(this.task_service.selected_task);
if(this.task_service.selected_task.name!="" && this.task_service.selected_task.description!=""){
console.log(this.task_service.selected_task);
clearTimeout(timerId);
}
},100);
}
}
shared\task.ts
export class Task {
name : String;
description : String;
}
shared\task.service.ts
import { Injectable } from '@angular/core';
import {Task} from './task';
@Injectable({
providedIn: 'root'
})
export class TaskService {
selected_task : Task;
tasks : Task[]=[];
constructor() { }
}
Setting up functions to run when form fields are filled out completely, without a submit button. Using setInterval to check the task_service.selected_task fields and perform operations when all fields are not empty strings. Encountering an error within the setInterval stating
Cannot read property 'selected_task' of undefined