I am using this form to take some basic information:

 <form action="/action_page.php" method="GET" name="clientForm">
        <label for="cname">Client name:</label><br>
        <input type="text" id="cname" placeholder="client name:" name="cname" required><br>
        <label for="clienturl">URL:</label><br>
        <input type="text" id="clienturl" placeholder="url:" name="clienturl" required><br><br>
        <input type="submit" value="Submit" button (click)="addClient()" >
        <input type="reset" value="Reset">
      </form>

This is the data i am currently holding:

  export const clients = [
    {
      name: 'client1',
      url: "https://www.google.com"
    },
    {
      name: 'client2',
      url: "https://www.yahoo.com"
    },
    {
      name: 'ACB',
      url: "https://www.dailymail.co.uk"
    },
    {
      name: 'client3',
      url: "https://www.youtube.com"
    },
    {

      name: 'client4',
      url: "https://www.nhs.uk"
    },
  ];

Then in my component I am struggling to get the data entered into the form and add it as an object to the existing data.