问用javascript动态生成角度材质输入域(检查参考代码不工作方式不工作)

EN

<mat-form-field class="example-full-width">
   <input matInput placeholder="Favorite food" value="Sushi">
</mat-form-field>

function nameFunction() {
          var r = document.createElement('div');
          var y = document.createElement("INPUT");
          r.setAttribute("value", "Name");
          r.innerHTML = '<form class="example-form"><mat-form-field class="example-full-width"> <input matInput placeholder="Favorite food" value="Sushi"> </mat-form-field> <mat-form-field class="example-full-width"> <textarea matInput placeholder="Leave a comment"></textarea> </mat-form-field> </form>';
          y.setAttribute("type", "text");
          y.style.float = "left";
          r.style.float = "left";
          r.style.margin = "1%";
          var g = document.createElement("i");
          g.setAttribute("class", "fas fa-times-circle text-danger pl-2 pr-2");
          increment();
          y.setAttribute("Name", "textelement_" + i);
          r.appendChild(y);
          g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
          r.appendChild(g);
          r.setAttribute("id", "label" + i);
    
    
          document.getElementById("myForm").appendChild(r);
        }

        <div class="row">
   <div class="col-md-12" [style.background]="color" id="newArea" (drop)="drop($event)" (dragover)="allowDrop($event)" [style.background]="color1" style=" padding: 10px; min-height: 550px;"> 
   </div>
</div>