Application Customizer to hide Save button

Question

I am trying to create the application customizer to hide save and cancel button from Newform.aspx in Modern UI, I tried writing below code but everything getting hide instead of Save button noticed HTML is getting display: none

@override
      public onInit(): Promise<void> {
        var Libraryurl = this.context.pageContext.list.title;  

        Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
       // this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);  

        let message: string = this.properties.testMessage;
        if (!message) {
          message = '(No properties were provided.)';
        }

        if(Libraryurl=="Announcements")
    {
        //Dialog.alert(`Hello from ${strings.Title}:\n\n${message}`);  
        // code to hide button
            let newbutton: any = document.getElementsByName("Save")[0] || document.documentElement;  
           // let newbutton2: any = document.getElementsByName("Cancel")[1] || document.documentElement; 
            //let newbutton3: any = document.getElementsByName("Edit columns")[2] || document.documentElement;  



            Dialog.alert(newbutton.name);  
            newbutton.style.display = "none"; 
            //newbutton2.style.display = "none"; 
            return Promise.resolve();

            //newbutton3.style.display = "none"; 
    }


       // this._renderPlaceHolders();

        //return Promise.resolve();
      }

Answer 1

You may try this.

public onInit(): Promise<void> {
      Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);

      // Wait for the placeholders to be created (or handle them being changed) and then
    // render.
      this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);

      const css: string = 'div.ReactClientForm-editButtons>button{display:none !important}';          
      if (css) {
          // inject the style sheet
          const head: any = document.getElementsByTagName("head")[0] || document.documentElement;
          let customStyle: HTMLStyleElement = document.createElement("style");
          head.appendChild(customStyle);
          customStyle.title = "MSCustom";
          customStyle.type = "text/css";
          customStyle.appendChild(document.createTextNode(css))
      }
      return Promise.resolve<void>();
    }